Question

我正在尝试用这个简单的练习学习javascript，我似乎很难过。当数量放在3个单独的文本框中并调用我的函数来计算它但不返回任何数字时，我需要进行简单的计算。所以每个盒子都放了一个数量，这是我的尝试：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Work</title>
    <script type="text/javascript" src="ex4.js"></script>
  </head>
  <body>
     <div id="container">
     <h2>Order Books Online</h2>
     <form action="" method="post" id=”frm”>
       <fieldset>
       <table border="0">
         <tr>
           <th>Book</th>
           <th>Quantity</th>
           <th>Price</th>
         </tr>
         <tr>
           <td>Basics of C++</td>
           <td><input type="text" size="3" id="book_1" /></td>
           <td>$19.99</td>
         </tr>
         <tr>
           <td>Program Development in Perl</td>
           <td><input type="text" size="3" id="book_2" /></td>
           <td>$86.00</td>
         </tr>
         <tr>
           <td>Advanced JavaScript</td>
           <td><input type="text" size="3" id="book_3" /></td>
           <td>$55.00</td>
         </tr>
       </table>
       <br /><br />
       <input type="submit" onclick="return sum2()" value="Place Order" id="sub" />
       </fieldset>
      </form>
     </div>
  </body>
</html>

{{1}}

我认为我有正确的代码，但可能只是遗漏了一些东西。我的外部javascript文件名为ex4.js，与html文件位于同一文件夹中。我的功能是正确的，我相信我正确地调用它所以我不知道我在哪里出错了，只想要退还金额!!

Answer 1

您在页面加载时立即调用该函数：

<script>
    document.write(sum2());
</script>

那时，这些元素没有值：

var one = document.getElementById("book_1").value;
var two = document.getElementById("book_2").value;
var three = document.getElementById("book_3").value;

由于页面刚加载，用户尚未输入任何值。

您还尝试调用此处不存在的函数：

<input type="submit" onclick="sum()" value="Place Order" id="sub" />

这就是你应该调用你所拥有的功能的地方：

<input type="submit" onclick="sum2()" value="Place Order" id="sub" />

此处还有语法错误：

alert (Error, values missing);

字符串应该有引号：

alert ('Error', 'values missing');

你也没有用函数的结果做任何事情：

<input type="submit" onclick="sum2()" value="Place Order" id="sub" />

如果此函数正在处理click事件，那么您应该做两件事：

取消活动，以便表格不会发布
在函数中，将值输出到页面

这样的事情：

<input type="submit" onclick="return sum2()" value="Place Order" id="sub" />

然后在函数中，您将在使用值后返回false：

document.getElementById('output').value = sum;
return false;

作为旁注，您还应在声明变量时使用var关键字。这样他们就会留在本地范围而不是window范围：

var sum1 = one * 19.99;
var sum2 = two * 86.00;
var sum3 = three * 55.00;
var sum = sum1 + sum2 + sum3;

此外，这是很好的机会，让您熟悉浏览器中的开发人员工具。您可以监视网络请求（以确保首先加载外部资源），读取错误消息（当浏览器尝试告诉您问题时），并在代码中放置调试断点逐步查看执行过程中发生的事情。

调试总是比猜测更好。

外部Javascript脚本永远不会被调用

1 个答案: