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

I'm Having Problems Merging HTML and JavaScript

本文关键字：遇到 问题 JavaScript 合并 HTML      更新时间：2023-09-26

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

有人告诉我这是一个简单的解决方案，但我只是一个初学者，并且已经考虑了一段时间的这段代码，但收效甚微，因此任何帮助将不胜感激。谢谢你的时间！

您没有给任何输入一个 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);

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

在不真正查看代码的情况下，更改以下内容：

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

对此

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

并对所有其他事件执行相同的操作

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

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

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

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

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

TotalCharge.value = // your expression

确保你的函数被调用

首先，通过将以下语句之一放在开头来确保调用您的函数，如注释中所建议的那样：

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

显示计算结果

然后，您必须对计算结果执行某些操作。让我们从另一个警报/控制台开始.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(或用getElementsByName替换getElementById 

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。学习普通的JavaScript/HTML很棒，但是jQuery会让你的生活更轻松。

相关文章：