4

我正在尝试制作一个模拟网页，该网页旨在使用 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 部分：

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

有些东西告诉我这是一个简单的解决方法，但我只是一个初学者，并且一直在考虑这段代码很长一段时间，但收效甚微，所以任何帮助都将不胜感激。感谢您的时间！

4

4 回答 4

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

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

于 2013-10-07T02:24:06.367 回答
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;

并对所有其他出现的情况做同样的事情

于 2013-10-07T01:31:33.293 回答
1

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

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

要做到这一点，你应该按照 qwertymk 所说的去做——首先在你的变量中为 DOM 对象分配一个引用：

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

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

TotalCharge.value = // your expression
于 2013-10-07T01:47:15.963 回答
1

确保正在调用您的函数

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

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

最后一个提示：一路调试你的代码

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

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

于 2013-10-07T02:03:28.653 回答