在本地将 javascript 添加到 xampp 以执行数学/公式答案

【问题标题】：locally add javascript to xampp to do math/formula在本地将 javascript 添加到 xampp 以执行数学/公式
【发布时间】：2013-12-31 04:02:49
【问题描述】：

我正在尝试制作一个表格，用户可以在其中填写一些单元格的值，然后单击提交以显示计算结果。我的目录中有 jquery-2.0.3.min.js 和 script.js。这是我的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
<title>Inteligence Decision Support System</title>
<script src='localhost/idss/jquery-2.0.3.min.js'></script>
<script type="text/javascript" src='localhost/idss/script.js' charset="utf-8"></script>
</head>

<body>
<table border="1">

<tr>
<th>Name</th>
<th>Cost</th>
<th>x20</th>
<th>x25</th>
</tr>

<tr>
<td>someName</td>
<td><input name="Cost" type="text" value="0"></td>
<td><input name="a20" type="text" value=""></td>
<td><input name="a25" type="text" value=""></td>
</tr>

</table>
<input type="button" onclick="Zcount()" value="Submit" >
</body>
</html>

这里是 script.js 文件

<script type="text/javascript">
function Zcount(){
    var cost, a20, a25;

    a20 = document.getElementById("a20").value;
    a25 = document.getElementById("a25").value;

    cost = (2*parseInt(a20))+(3*parseInt(a25));
    document.getElementById("Cost").value=cost;
}
</script>

但是当我填写 a20 和 a25 并单击提交按钮时，什么也没发生。结果保持为零。我哪里做错了？

【问题讨论】：

这和xampp有什么关系？
我试图弄清楚我调用脚本文件的方式是否错误，或者我应该将它放在 xampp 文件夹中的其他位置。无论如何，我只是试图将脚本放在我的 html 代码中，但这也不起作用。

标签： javascript html xampp localhost

【解决方案1】：

您必须检查是否实际加载了外部 javascript。您可以通过在浏览器中单击鼠标右键并单击 chrome 或 firefox 中的“检查元素”来执行此操作。如果您在这些检查器中单击“控制台”，则可以检查它们是否已加载。如果不是，则必须在 HTML 脚本元素中调整 src 属性。

此外，您必须在输入上使用 id 属性，因为您使用的是 getElementById，并且正式的输入必须被表单元素包围。因此，在 body 标签中，您的 HTML 将是这样的：

<form id="form" action="#" method="post">
<table border="1">

<tr>
<th>Name</th>
<th>Cost</th>
<th>x20</th>
<th>x25</th>
</tr>

<tr>
<td>someName</td>
<td><input name="Cost" id="Cost" type="text" value="0"></td>
<td><input name="a20" id="a20" type="text" value=""></td>
<td><input name="a25" id="a25" type="text" value=""></td>
</tr>

</table>
<input type="submit" value="Submit" >
    </form>

在 script.js 中，您不必使用 HTML 脚本标签。

如果不使用jquery，为什么还要包括它？

但是因为你这样做，你可以使用这个脚本：

$('form').submit(function(){

    var cost, a20, a25;

    a20 = $("#a20").val();
    a25 = $("#a25").val();

    cost = (2*parseInt(a20))+(3*parseInt(a25));
    $("#Cost").val(cost);
    return false;
});

工作 jsFiddle：http://jsfiddle.net/jwvanveelen/ch2wR/

【讨论】：

非常感谢您的回复！我是新手，只花了四个小时调整它。我检查了控制台，它是空的，所以这意味着它没有加载？如果我将 Zcount 函数放在 html 代码中会怎样？我刚刚尝试将带有 Zcount 函数的 body html 放在我的 head html 中。使用调用，但仍然无法计算。
如果您的控制台在重新加载页面时没有显示任何内容，这意味着一切都很好。因此，您不必更改标记之间的任何内容。如果您复制我在标记中提供的 html，并复制我在您的 script.js 中提供的 javascript，它应该可以工作。
啊，我明白了。现在已经加载了。但数学仍然行不通，成本仍然为 0。我尝试将公式更改为 a20 和 a25 之间的简单加法，它仍然为 0。
嗯。我想知道怎么了。它对我的不起作用，我将它们复制到信中。稍后我将在其他计算机上尝试。谢谢你的解释！ :)