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

时间:2016-07-30 15:02:47

标签: javascript html forms submit getelementbyid

我正在尝试用这个简单的练习学习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文件位于同一文件夹中。我的功能是正确的,我相信我正确地调用它所以我不知道我在哪里出错了,只想要退还金额!!

1 个答案:

答案 0 :(得分: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;

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

调试总是比猜测更好。