无法将 javascript 代码连接到 html 代码答案

【问题标题】：Trouble connecting javascript code to html code无法将 javascript 代码连接到 html 代码
【发布时间】：2013-06-26 18:13:53
【问题描述】：

我正在创建一个计算器，并编写了以下代码：

对于javascript：

function calculate() {
'use strict';
 var total;
 var quantity = document.getElementById('quantity').value;
 var price = document.getElementById('price').value;
 var tax = document.getElementById('tax').value;
 var discount = document.getElementById('discount').value;
 total = quantity*price;
 tax /= 100;
 tax++;
 total *= tax;
 tax = tax/100;
 tax = tax+1;
 total = total*tax;
 total -= discount;
 document.getElementById('total').value = total;
 return false;
 }
 function init() {
 'use strict';
 var theForm = document.getElementById('theForm');
 theForm.onsubmit = calculate;
 }
 window.onload=init;

对于html：

 <div><label for="quantity">Quantity</label><input type="number"
 name="quantity" id="quantity" value="1" min="1" required></div>

 <div><label for="price">Price Per Unit</label><input type="text"
 name="price" id="tax" value="1.00" required></div>

 <div><label for="tax">Tax Rate (%)</label><input type="text"
  name="tax" id="tax" value="0.0" required></div>

 <div><label for ="discount">Discount</label><input type="text"
  name="discount" id="discount" value="0.00" required></div>

 <div><label for="total">Total</label><input type="text" name="total"
 id="total" value="0.00"></div>

 <div><input type="submit" value="Calculate" id="submit"></div>

我已将文件分别保存为 shopping.js 和 shopping.html 但我不知道如何将代码互连在一起，以便当我单击 shopping.html 并打开浏览器时，计算器可以正常工作。

我尝试使用脚本标签在 html 代码中包含 javascript 代码，但没有成功。我读了一些文章说你必须将它们保存在同一个目录中，但我不明白。我将它们保存在桌面上一个名为 shopping 的文件中，我需要从这里获得一些帮助。

谢谢。

【问题讨论】：

您能告诉我们您尝试使用的脚本标签吗？
我猜你需要将
表单标签在哪里？
我用过

标签： javascript html forms calculator

【解决方案1】：

检查here

价格的 id 是“税”，我认为只是拼写错误。我还将您的输入类型 sumbit 更改为按钮。

代码：

window.onload = function() { // this loads your script when the page loads
    function calculate() {  
   'use strict';
    var total = 0;

    var quantity = document.getElementById('quantity').value;
    var price = document.getElementById('price').value;
    var tax = document.getElementById('tax').value;
    var discount = document.getElementById('discount').value;
    total = quantity * price;
    tax /= 100;
    tax++;
    total *= tax;
    tax = tax / 100;
    tax = tax + 1;
    total = total * tax;
    total -= discount;
    document.getElementById('total').value = total;
    return false;
    }
};

您可以将此代码添加到您的页面或通过外部文件调用它，然后您只需将其放入您的html代码<script src="shopping.js" type="text/javascript"></script>。放入<head> 或<body> 标签内。

【讨论】：

它仍然无法正常工作。我不知道如何将html文件连接到javascript文件。
@user1804697 - 再次检查我的答案，现已更新。脚本应该在页面的内，在这个标签内：
是的，它正在工作，但问题不在于那个。我的桌面上有一个名为工作区的文件。里面我保存了shopping.html和shopping.js，问题是我不知道怎么把它们连接起来
好的，现在可以了吗？如果它们在同一目录中，请检查我答案的最后一个短语，那里有说明。如果您遇到麻烦，请告诉 mo。
还是不行！在我的桌面上，我有一个名为 workspace 的文件夹，我在其中保存了这两个文件。当我们说“目录”时，也许我没有关注..

【解决方案2】：

如果它们在同一个目录中，您可以在 HTML 页面中调用 js 文件，如下所示：

<script src="shopping.js" type="text/javascript"></script>

如果它在文件夹中，则必须在 src 行中反映它：文件夹名/文件名

这就是如何将外部 js 文件放入 HTML 文档的方法。但是，如果您将 js 代码直接放入 HTML 文档的脚本标记中，但仍然无法正常工作，则代码存在问题。

【讨论】：