我在合并HTML和JavaScript时遇到问题

Question

我正在尝试创建一个模拟网页，旨在使用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>

这是我试图在按下“Click for Calculation”按钮时打印出程序的JavaScript部分：

<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>

有些东西告诉我这是一个简单的解决方案，但我只是一个初学者，并且已经考虑了这段代码很长一段时间没有成功，所以任何帮助将不胜感激。 感谢您的时间！

Answer 1

您没有为任何输入提供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);

查看上面更新的小提琴链接

Answer 2

如果没有真正查看代码，请更改：

var TotalCharge = document.getElementById('TotalCharge').value;
TotalCharge = days * 15 + MilesDriven * 0.12;

对此

var TotalCharge = document.getElementById('TotalCharge');
TotalCharge.value = days * 15 + MilesDriven * 0.12;

并为其他所有事件做同样的事情

Answer 3

要扩展qwertymk的答案，如果脚本的目标是显示ID为TotalCharge的HTML元素内的总费用，则需要相应地更新DOM。

目前你正在做的是创建一个javascript变量TotalCharge设置为TotalCharge DOM对象的value属性。 这将创建字符串值的副本，而不会将引用返回给DOM对象。 当您稍后更改变量的值时，它不会反映在DOM中。

要实现这一点，你应该像qwertymk所说的那样 - 首先在你的变量中为DOM对象分配一个引用：

var TotalCharge = document.getElementById("TotalCharge");

此时，您可以根据引用的原因更改DOM对象的属性，这些更改将反映在您的页面上：

TotalCharge.value = // your expression

Answer 4

确保调用您的函数

首先，按照注释中的建议，通过在开头放置以下任一语句来确保调用函数：

function CarRentalTotals() {
  alert('CarRentalTotals called !');
  console.log('CarRentalTotals, called');
  ...

显示计算结果

然后，您必须对计算结果执行某些操作。 让我们从函数末尾的另一个alert / 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> 。

最后一个提示：沿途调试代码

您应该使用您的Web开发人员控制台和console.log('message')方法。

顺便说一句，你在你的问题中添加了jQuery标签，但是这里似乎没有使用jQuery。 学习vanilla JavaScript / HTML很棒，但jQuery会让你的生活更轻松。