わかりましたので、私は初心者です (この旅を 1 日前に始めました) ゆっくりと自分自身に JavaScript を教え、単純な価格見積もりのコードを書きました... しかし、今はそれを基に構築しようとしています。コードのフォーマットが非常に悪いことは知っています(スペースがどこにあるのか、それらの括弧がどこにあるのかわかりません:S)が、思いついたものは機能します...スペースなどはプログラムにとって重要ですか?または、美的理由や簡単なデバッグなどのためです...
だから私の価格見積もり...それは合計価格、時間、映像、DVDSのいくつかの方程式を持っています...そしてそれらはすべて入力フィールドであり、今私は方程式にチェックボックスを追加したいと思います..それらがチェックされている場合値合計に追加されます...電卓にそれらがありますが、それらに添付されたスクリプトはありません...3つのチェックボックスのみが設定値を持っています...2つのチェックボックスにはDVDの数を掛けた値があります合計に追加される前に...そして最後のチェックボックスは、私がすでに持っているものと同様の別のテキスト入力になります..
別の関数のように複数のことを試しましたが、とにかく間違って行われた可能性があります笑、別の計算関数、加算関数、updatecost 関数、いくつかの chkbox 関数を試しました (名前を忘れました)...しかし、計算された値を取得する方法がわかりませんでしたそのチェックボックスの関数で、計算関数の式に。私はparsefloatのことを試しましたが、値をチェックした場合にのみ半機能しました....
私が試した別のことは、入力チェックボックスの値の前に0の入力非表示値を配置することでした。両方とも同じ名前です...いくつかの調査では、チェックボックスがチェックされていない場合、設定した非表示値がデフォルトになることがわかりました同じ名前 (0 です)...うまくいきませんでした...または、数式に正しく入力していない可能性があります....正しい方向に向けてください:) 髪を引き抜きます!!!
http://jsfiddle.net/yetanothercoder/uFD3y/
<html>
<head>
<style type="text/css">
.tableheader {
font-weight: bold;
font-size: 20px;
font-family: calibri;
text-align: center;
}
.regreelfont {
font-size: 15px;
font-family: calibri;
text-align: right;
background-color: #96C6FF;
}
.supreelfont {
font-size: 15px;
font-family: calibri;
text-align: right;
background-color: #7CB8FF;
}
.sixreelfont {
font-size: 15px;
font-family: calibri;
text-align: right;
background-color: #55A1FE;
}
.bottomfonts {
font-family: calibri;
font-size: 16px;
font-weight: 900;
}
.cellcolor {
text-align: center;
background-color: #D2E7FF;
}
.cellcolor2 {
text-align: left;
background-color: #D2E7FF;
}
.rightside {
background-color: #D2E7FF;
text-align: right;
}
.border {
border-width: 10px;
border-radius: 20px;
border-style: solid;
border-color: #CBCBCB;
}
.leftside {
text-align: left;
}
.bottwo {
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
.addons {
font-family: Lucida Console;
font-size:11px;
font-weight;
bold;
}
.topleft {
border-top-left-radius: 10px;
}
.topright {
border-top-right-radius: 10px;
}
.orange {
color: #fef4e9;
border: solid 1px ##197BFB;
border-radius: 10px;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#197BFB), to(#4A5C75));
background: -moz-linear-gradient(top, #197BFB, #207DF6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#197BFB', endColorstr='#4A5C75');
}
.orange:hover {
background: #C3D9FF;
}
.orange:active {
color: #000000;
</style>
<script language="javascript" type="text/javascript">
function calculate() {
var type;
price = parseFloat(0.20);
regthree = parseFloat(document.form.regthree.value);
if (isNaN(regthree)) {
regthree = 0;
}
regfour = parseFloat(document.form.regfour.value);
if (isNaN(regfour)) {
regfour = 0;
}
regfive = parseFloat(document.form.regfive.value);
if (isNaN(regfive)) {
regfive = 0;
}
regsix = parseFloat(document.form.regsix.value);
if (isNaN(regsix)) {
regsix = 0;
}
regseven = parseFloat(document.form.regseven.value);
if (isNaN(regseven)) {
regseven = 0;
}
supthree = parseFloat(document.form.supthree.value);
if (isNaN(supthree)) {
supthree = 0;
}
supfour = parseFloat(document.form.supfour.value);
if (isNaN(supfour)) {
supfour = 0;
}
supfive = parseFloat(document.form.supfive.value);
if (isNaN(supfive)) {
supfive = 0;
}
supsix = parseFloat(document.form.supsix.value);
if (isNaN(supsix)) {
supsix = 0;
}
supseven = parseFloat(document.form.supseven.value);
if (isNaN(supseven)) {
supseven = 0;
}
sixthree = parseFloat(document.form.sixthree.value);
if (isNaN(sixthree)) {
sixthree = 0;
}
sixfour = parseFloat(document.form.sixfour.value);
if (isNaN(sixfour)) {
sixfour = 0;
}
sixfive = parseFloat(document.form.sixfive.value);
if (isNaN(sixfive)) {
sixfive = 0;
}
sixsix = parseFloat(document.form.sixsix.value);
if (isNaN(sixsix)) {
sixsix = 0;
}
sixseven = parseFloat(document.form.sixseven.value);
if (isNaN(sixseven)) {
sixseven = 0;
}
regthreetot = parseFloat(regthree * 50);
regfourtot = parseFloat(regfour * 100);
regfivetot = parseFloat(regfive * 200);
regsixtot = parseFloat(regsix * 300);
regseventot = parseFloat(regseven * 400);
supthreetot = parseFloat(supthree * 50);
supfourtot = parseFloat(supfour * 100);
supfivetot = parseFloat(supfive * 200);
supsixtot = parseFloat(supsix * 300);
supseventot = parseFloat(supseven * 400);
sixthreetot = parseFloat(sixthree * 50);
sixfourtot = parseFloat(sixfour * 100);
sixfivetot = parseFloat(sixfive * 200);
sixsixtot = parseFloat(sixsix * 300);
sixseventot = parseFloat(sixseven * 400);
rthreet = parseFloat(regthree * 3.5);
if (isNaN(regthree)) {
regthree = 0;
}
rfourt = parseFloat(regfour * 7);;
if (isNaN(regfour)) {
regfour = 0;
}
rfivet = parseFloat(regfive * 14);
if (isNaN(regfive)) {
regfive = 0;
}
rsixt = parseFloat(regsix * 22);
if (isNaN(regsix)) {
regsix = 0;
}
rsevent = parseFloat(regseven * 29);
if (isNaN(regseven)) {
regseven = 0;
}
sthreet = parseFloat(supthree * 3);
if (isNaN(supthree)) {
supthree = 0;
}
sfourt = parseFloat(supfour * 6);
if (isNaN(supfour)) {
supfour = 0;
}
sfivet = parseFloat(supfive * 13);
if (isNaN(supfive)) {
supfive = 0;
}
ssixt = parseFloat(supsix * 20);
if (isNaN(supsix)) {
supsix = 0;
}
ssevent = parseFloat(supseven * 26);
if (isNaN(supseven)) {
supseven = 0;
}
sithreet = parseFloat(sixthree * 1.5);
if (isNaN(sixthree)) {
sixthree = 0;
}
sifourt = parseFloat(sixfour * 3);
if (isNaN(sixfour)) {
sixfour = 0;
}
sifivet = parseFloat(sixfive * 7);
if (isNaN(sixfive)) {
sixfive = 0;
}
sisixt = parseFloat(sixsix * 11);
if (isNaN(sixsix)) {
sixsix = 0;
}
sisevent = parseFloat(sixseven * 14);
if (isNaN(sixseven)) {
sixseven = 0;
}
totalprice = parseFloat(regthreetot + regfourtot + regfivetot + regsixtot + regseventot + supthreetot + supfourtot + supfivetot + supsixtot + supseventot + sixthreetot + sixfourtot + sixfivetot + sixsixtot + sixseventot) * price;
tottime = parseFloat(rthreet + rfourt + rfivet + rsixt + rsevent + sthreet + sfourt + sfivet + ssixt + ssevent + sithreet + sifourt + sifivet + sisixt + sisevent)
totalfoot = parseFloat(regthreetot + regfourtot + regfivetot + regsixtot + regseventot + supthreetot + supfourtot + supfivetot + supsixtot + supseventot + sixthreetot + sixfourtot + sixfivetot + sixsixtot + sixseventot)
dvdcal = parseFloat(tottime / 60)
totdvd = Math.ceil(dvdcal)
document.form.quote.value = totalprice;
document.form.totalfootage.value = totalfoot;
document.form.ttime.value = tottime;
document.form.totdvd.value = totdvd;
document.form.totad.value = music
}
</script>
</head>
<body>
<form name="form">
<table class="border" cellspacing="0" cellpadding="3">
<tr>
<td class="tableheader cellcolor topleft">Reel Size</td>
<td class="tableheader cellcolor topright"># of Reels</td>
</tr>
<tr>
<td class="regreelfont">3" Regular8 (50 ft)</font>
</td>
<td class="cellcolor">
<input type="text" name="regthree" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td class="regreelfont">4" Regular8 (100 ft)</td>
<td class="cellcolor">
<input type="text" name="regfour" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td class="regreelfont">5" Regular8 (200 ft)</td>
<td class="cellcolor">
<input type="text" name="regfive" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td class="regreelfont">6" Regular8 (300 ft)</td>
<td class="cellcolor">
<input type="text" name="regsix" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td class="regreelfont">7" Regular8 (400 ft)</td>
<td class="cellcolor">
<input type="text" name="regseven" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
<tr></tr>
<td class="supreelfont">3" Super8 (50 ft)</td>
<td class="cellcolor">
<input type="text" name="supthree" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td class="supreelfont">4" Super8 (100 ft)</td>
<td class="cellcolor">
<input type="text" name="supfour" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td class="supreelfont">5" Super8 (200 ft)</td>
<td class="cellcolor">
<input type="text" name="supfive" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td class="supreelfont">6" Super8 (300 ft)</td>
<td class="cellcolor">
<input type="text" name="supsix" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td class="supreelfont">7" Super8 (400 ft)</td>
<td class="cellcolor">
<input type="text" name="supseven" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td class="sixreelfont">3" 16mm (50 ft)</td>
<td class="cellcolor">
<input type="text" name="sixthree" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td td class="sixreelfont">4" 16mm (100 ft)</td>
<td class="cellcolor">
<input type="text" name="sixfour" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td td class="sixreelfont">5" 16mm (200 ft)</td>
<td class="cellcolor">
<input type="text" name="sixfive" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td td class="sixreelfont">6" 16mm (300 ft)</td>
<td class="cellcolor">
<input type="text" name="sixsix" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td td class="sixreelfont">7" 16mm (400 ft)</td>
<td class="cellcolor">
<input type="text" name="sixseven" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:30px; width:60px; font-size:21px">
</td>
</tr>
<tr>
<td class="cellcolor addons leftside" colspan="2">BACKGROUND MUSIC - $14.99
<input type="checkbox" name="ckBox" id="ckBox">
</td>
</tr>
<tr>
<td class="cellcolor addons leftside" colspan="2">TITLES (PER DVD) - $9.99
<input type="checkbox" name="titles">
</td>
</tr>
<tr>
<td class="cellcolor addons leftside" colspan="2">TRANSITIONS (PER DVD) - $9.99
<input type="checkbox" name="transitions"
</td>
</tr>
<tr>
<td class="cellcolor addons leftside" colspan="2">FILM REPAIR AND SPLICING - $14.99
<input type="checkbox" name="adees" value="14.99">
</td>
</tr>
<tr>
<td class="cellcolor addons leftside" colspan="2">SPECIAL FILM EDITING - $100.00
<input type="checkbox" name="adees" value="100">
</td>
</tr>
<tr>
<td class="cellcolor addons leftside" colspan="2">EXTRA COPIES - $9.99 PER COPY
<input type="text" name="copies" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:25px; width:50px; font-size:15px">
</td>
</tr>
<tr>
<td class="cellcolor" colspan="2"></td>
</tr>
<tr>
<td class="rightside bottomfonts" colspan="2">TOTAL PRICE ($)
<input type="text" name="quote" style="font-family:Verdana; background-color:#FFFFE5; height:25px; text-align:center; width:100px; font-size:16px">
</td>
<tr/>
<tr>
<td class="rightside bottomfonts" colspan="2">FOOTAGE (ft)
<input type="text" name="totalfootage" size="7" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:25px; width:100px; font-size:16px"
</td>
</tr>
<tr>
<td class="rightside bottomfonts" colspan="2">TOTAL TIME (min)
<input type="text" name="ttime" size="7" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:25px; width:100px; font-size:16px">
</td>
</tr>
<tr>
<td class="rightside bottomfonts" colspan="2">TOTAL DVDs
<input type="text" name="totdvd" size="7" style="font-family:Verdana; background-color:#FFFFE5; text-align:center; height:25px; width:100px; font-size:16px">
</td>
</tr>
<tr>
<td class="cellcolor bottwo" colspan="2">
<input type="button" class="orange" style="font-size: 18px; width:60px;height:35px"
value="Clear" onClick="this.form.reset()"> 
<input type="button" name="Button" class="orange" style="font-size: 18px; width:120px;height:35px"
value="Calculate" onClick="calculate()">
</td>
</tr>
</table>
</form>
</body>