Question

我在尝试验证表单方面遇到了麻烦。我根据下面的计算编写了一个脚本

<script>
var class_let = new Array();
class_let["Class A"]=10;
class_let["Class B"]=20;
class_let["Class C"]=40;
class_let["Class D"]=50; 

function getChargingPrice() {
var price=0;
var theForm = document.forms["Classes"];
var classPrice = theForm.elements["day1"];

if(classPrice.checked==true)
{
   price = class_let[classPrice.value];
}
return price;
}

function calculateTotal() {
var calculatedPrice = getChargingPrice() + 20;

var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Total Price $"+calculatedPrice;
}

function hideTotal() {
var divobj = document.getElementById('totalPrice');
divobj.style.display='none';
}
</script>

HTML：

<form action="" id="Classes" onsubmit="return false;">
<b>Select Class:</b>
<select id="classLetter" name="classLetter" onchange="calculateTotal()">
   <option value="Class A">Class A</option>
   <option value="Class B">Class B</option>
   <option value="Class C">Class C</option>
   <option value="Class D">Class D</option>
</select>
<p><b><label for="attendance">Days Attending:</label></b></p>
<td><p><input type="checkbox" id="day1" name="Day One" onclick="calculateTotal()" value="Monday"/> Monday<br>
<input type="checkbox" id="day2" name="Day Two" value="Tuesday"/> Tuesday<br>
<input type="checkbox" id="day3" name="Day Three" value="Wednesday"/> Wednesday<br>
<input type="checkbox" id="day4" name="Day Four" value="Thursday"/> Thursday<br>
<input type="checkbox" id="day5" name="Day Five" value="Friday"/> Friday<br>
<p><b><label for="cost">Total Cost:</label></b></p>
<div id="totalPrice"></div>
</form>

我所拥有的是一个下拉列表，五个复选框的天数和总价格函数。

如果要运行此脚本，每个类（下拉列表）都有自己不同的价格金额，但会按选定或检查的天数添加。例如。如果我想选择B级（等于20）并选择星期一和星期三，我的剧本应该在最后增加20 + 20 = 40加上另外20，总共60美元。

我还没有写完整个剧本，但我的问题是当我检查或点击一天时，它无法像我描述的那样给我一个完整的计算。我必须感谢帮助，谢谢。

Answer 1

我看到一些奇怪的代码试图获取复选框值，并且它仅适用于第一个复选框，即星期一。以下是一些可以帮助您入门的提示：

我建议存储两个值。一个根据选择的类来跟踪当前价格。一个根据所选天数跟踪价格。
当任何输入/选择元素发生变化时，计算并更新这些价格。

下面的示例（您需要在其他4个复选框上设置onchange属性以执行calculateTotal()函数：

var class_let = new Array();
class_let["Class A"] = 10;
class_let["Class B"] = 20;
class_let["Class C"] = 40;
class_let["Class D"] = 50;

var classPrice = 0;
var daysPrice = 0;

function setClassPrice() {
    var className = document.getElementById('classLetter').options[selectedIndex].value;
    classPrice = class_let[className];
}

function setDaysPrice() {
    daysPrice = 0;
    var checkbox, i;
    for (i = 1; i <= 5; i++) {
        checkbox = document.getElementById('day' + i);
        if (checkbox.checked) {
            daysPrice += 20;
        }
    }
}

function calculateTotal() {
    setClassPrice();
    setDaysPrice();

    var calculatedPrice = classPrice + daysPrice;
    var divobj = document.getElementById('totalPrice');
    divobj.style.display = 'block';
    divobj.innerHTML = "Total Price $" + calculatedPrice;
}

function hideTotal() {
    var divobj = document.getElementById('totalPrice');
    divobj.style.display = 'none';
}

Answer 2

我同意wongcode，你也应该尽量避免在html标记中使用事件处理程序。例如：

<input type="radio" onclick = "myFunction()">

^这只是不好的做法。

尝试尽可能地将JS保存在自己的文件中。我不确定你想要实现什么，所以我只是在jsfiddle中为你重新制作应用程序并进行一些更改。我会重做整个HTML标记，但我没有时间重做所有内容。这就是我所做的。

http://jsfiddle.net/VodkaTonic/aaDr6/3/

请记住，我会在这里改变很多东西。

无法验证我的计算

2 个答案: