将javascript代码连接到html代码时出现问题

将javascript代码连接到html代码时出现问题,javascript,html,forms,calculator,Javascript,Html,Forms,Calculator,我正在创建一个计算器,并编写了以下代码: 对于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

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

对于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并打开浏览器时,计算器就能正常工作

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

谢谢。

检查

price的id是“tax”,我想这只是打字错误。我还将您的输入类型sumbit改为按钮

代码:

您可以将此代码添加到页面或通过外部文件调用它,然后只需将其放入html代码
。放入
标签内。

检查

price的id是“tax”,我想这只是打字错误。我还将您的输入类型sumbit改为按钮

代码:


您可以将此代码添加到页面或通过外部文件调用它,然后只需将其放入html代码
。放入
标记中。

如果它们位于同一目录中,可以在HTML页面中调用js文件,如下所示:

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

如果它位于文件夹中,则必须在src行中反映:foldername/filename


这就是如何将外部js文件放入HTML文档的方法。但是,如果您将js代码直接放入HTML文档上的脚本标记中,但仍然不起作用,则代码存在问题。

如果它们位于同一目录中,您可以在HTML页面中调用js文件,如下所示:

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

如果它位于文件夹中,则必须在src行中反映:foldername/filename


这就是如何将外部js文件放入HTML文档的方法。但是,如果您将js代码直接放入HTML文档上的脚本标记中,但仍然不起作用,然后代码出现了问题。

您可以向我们展示您尝试使用的脚本标记吗?我猜您需要将标记移动到HTML块内。表单标记在哪里?我使用过的脚本标记可以向我们展示您尝试使用的脚本标记吗?我猜您需要将标记移动到HTML块内。表单标记在哪里?我使用过它仍然不起作用。我不知道如何将html文件连接到javascript文件。@user1804697-再次检查我的答案,现已更新。脚本应该在页面的内部,在这个标签中:是的,它正在工作,但问题不是这样。我的桌面上有一个名为workspace的文件。在我保存的shopping.html和shopping.js中,问题是我不知道如何将它们连接在一起好的,现在可以使用了吗?如果它们在同一个目录中,请检查我答案的最后一句,说明就在那里。如果您遇到麻烦,请告诉mo。它仍然不起作用!在我的桌面上,我有一个名为workspace的文件夹,我在其中保存了这两个文件。当我们说“目录”的时候,也许我没有跟上……它仍然不工作。我不知道如何将html文件连接到javascript文件。@user1804697-再次检查我的答案,现已更新。脚本应该在页面的内部,在这个标签中:是的,它正在工作,但问题不是这样。我的桌面上有一个名为workspace的文件。在我保存的shopping.html和shopping.js中,问题是我不知道如何将它们连接在一起好的,现在可以使用了吗?如果它们在同一个目录中,请检查我答案的最后一句,说明就在那里。如果您遇到麻烦,请告诉mo。它仍然不起作用!在我的桌面上,我有一个名为workspace的文件夹,我在其中保存了这两个文件。当我们说“目录”的时候,也许我没有听懂。。