我正在尝试创建一个模拟网页，该网页旨在使用HTML和Javascript在任何给定天数内返回租车费用。页面的HTML部分效果很好，但是当我按下按钮来计算总数时，它什么也没做。我已经浏览了互联网，希望找到这个问题的答案，但无论我尝试什么，似乎都不想工作。
这是我的代码的HTML部分，它正常工作
<form>
Name: <input type="text" name="name"><br>
Street Address: <input type="text" name="street">
City: <input type="text" name="city"><br>
State: <input type="text" name="state">
Zip Code: <input type="text" name="zip"><br>
Beginning Odometer Reading: <input type="text" name="odometerbegin">
Ending Odometer Reading: <input type="text" name="odometerend"><br>
Days of Use: <input type="number" name="days">
</form>
<button onclick="CarRentalTotals()">Click for Calculation</button>
以下是我尝试将程序打印出来的JavaScript部分 按下“Click for Calculation”按钮：
<script>
function CarRentalTotals() {
var name = document.getElementById('name').value;
var street = document.getElementById('street').value;
var city = document.getElementById('city').value;
var state = document.getElementById('state').value;
var zip = document.getElementById('zip').value;
var odometerbegin = document.getElementById('odometerbegin').value;
var odometerend = document.getElementById('odometerend').value;
var days = document.getElementById('days').value;
var MilesDriven = document.getElementById('MilesDriven').value;
MilesDriven = odometerend - odometerbegin;
var TotalCharge = document.getElementById('TotalCharge').value;
TotalCharge = days * 15 + MilesDriven * 0.12;
}
</script>
有些东西告诉我这是一个简单的解决方案，但我只是一个初学者，并且已经考虑了这段代码很长一段时间，但收效甚微，所以任何帮助都会受到赞赏。谢谢你的时间！
答案 0 :(得分：2)
您没有为任何输入提供ID，但您使用“getElemementById”方法来获取其值。将您的HTML更改为：
<form>
Name: <input type="text" id="name"><br>
Street Address: <input type="text" id="street">
City: <input type="text" id="city"><br>
State: <input type="text" id="state">
Zip Code: <input type="text" id="zip"><br>
Beginning Odometer Reading: <input type="text" id="odometerbegin">
Ending Odometer Reading: <input type="text" id="odometerend"><br>
Days of Use: <input type="number" id="days">
</form>
此外，您正在尝试从“MilesDriven”和“TotalCharge”输入中获取值，这些输入未在HTML中定义。请改用以下JavaScript：
function CarRentalTotals() {
var name = document.getElementById('name').value;
var street = document.getElementById('street').value;
var city = document.getElementById('city').value;
var state = document.getElementById('state').value;
var zip = document.getElementById('zip').value;
var odometerbegin = document.getElementById('odometerbegin').value;
var odometerend = document.getElementById('odometerend').value;
var days = document.getElementById('days').value;
MilesDriven = odometerend - odometerbegin;
TotalCharge = days * 15 + MilesDriven * 0.12;
alert(TotalCharge);
}
如果您希望弹出消息说出除总数之外的其他内容。变化
alert(TotalCharge);
到
alert("Your total is $" + TotalCharge);
查看上面更新的小提琴链接
答案 1 :(得分：1)
如果没有真正查看代码，请更改此内容：
var TotalCharge = document.getElementById('TotalCharge').value;
TotalCharge = days * 15 + MilesDriven * 0.12;
到此
var TotalCharge = document.getElementById('TotalCharge');
TotalCharge.value = days * 15 + MilesDriven * 0.12;
对所有其他事件
执行相同操作答案 2 :(得分：1)
要扩展qwertymk的答案，如果您的脚本的目标是显示ID为TotalCharge的HTML元素内的总费用，则需要相应地更新DOM。
目前您正在做的是创建一个设置为TotalCharge DOM对象的value属性的javascript变量TotalCharge。这将创建字符串值的副本，而不会将引用返回给DOM对象。当您稍后更改变量的值时，它不会反映在DOM中。
要实现这一点，你应该像qwertymk所说的那样 - 首先在你的变量中为DOM对象分配一个引用：
var TotalCharge = document.getElementById("TotalCharge");
此时，您可以根据引用的原因更改DOM对象的属性，这些更改将反映在您的页面上：
TotalCharge.value = // your expression
答案 3 :(得分：1)
首先，请按照评论中的建议，通过在开头添加以下任一语句来确保调用您的函数：
function CarRentalTotals() {
alert('CarRentalTotals called !');
console.log('CarRentalTotals, called');
...
然后，你必须对计算结果做些什么。让我们从功能结束时的另一个警告/ console.log开始：
...
alert('MilesDriven = ' + MilesDriven + ', TotalCharge = ' + TotalCharge);
console.log('MilesDriven = ' + MilesDriven + ', TotalCharge = ' + TotalCharge);
}
接下来，我们必须使这个计算工作。首先，您使用document.getElementById检索值，但只定义了name属性。你可以：
1）为每个字段添加id属性，例如
City: <input type="text" name="city" id="city"><br>
2）或将getElementById替换为getElementsByName
var city = document.getElementsByName('city')[0].value;
最后，您的计算以
结束var MilesDriven = document.getElementById('MilesDriven').value;
MilesDriven = odometerend - odometerbegin;
var TotalCharge = document.getElementById('TotalCharge').value;
TotalCharge = days * 15 + MilesDriven * 0.12;
但是您在此处粘贴的HTML中未定义这两个元素。
如果要在HTML元素中显示这些值，则代码应如下所示：
var MilesDrivenElt = document.getElementById('MilesDriven');
MilesDrivenElt.value = odometerend - odometerbegin;
var TotalChargeElt = document.getElementById('TotalCharge');
TotalChargeElt.value = days * 15 + MilesDrivenElt.value * 0.12;
使用
Miles Driven: <input type="number" name="MilesDriven" id="MilesDriven"><br>
Total Charge: <input type="number" name="TotalCharge" id="TotalCharge"><br>
注意：这些元素没有义务<input> s。