为什么我的基本javascript没有运行?

时间:2015-10-02 17:26:04

标签: javascript html

我通常可以让它内联工作,但我想学习如何正确链接到更大项目的其他页面。这是:

var numberOne = document.getElementById('num1');
var numberTwo = document.getElementById('num2');
var submitButton = document.getElementById('submitButton');
var theAnswerText = document.getElementById('theAnswer');

submitButton.addEventListener("click", add);
numberOne.addEventListener("click", function() {
  alert("Hello! World");
});

function add() {

  alert("I am in add()");
  var num1 = numberOne.value;
  var num2 = numberTwo.value;
}
<html>

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

<body>
  <div style=display:inline;>
    <table>
      <tr>
        <td>
          <p>Num 1</p>
        </td>
        <td>
          <input id=num1 type=text />
        </td>
      </tr>

      <tr>
        <td>
          <p>Num 2</p>
        </td>
        <td>
          <input id=num2 type=text />
        </td>
      </tr>

      <tr>
        <td>
          <input id=submitButton type=button value=submit />
        </td>
      </tr>
    </table>
  </div>

  <p id=theAnswer>The answer is:</p>


  <body>

</html>

我大约6天前开始使用html / css / js,所以我很新。在此先感谢:)

1 个答案:

答案 0 :(得分:0)

建议将优先级attribute放在引号内。

<input id=num1 type=text />

以下是推荐的语法。

<input id='num1' type="text" />
//Please note that single quote and double quote both works.

其次,即使你纠正了语法,你的javascript也行不通。因为在呈现html正文之前加载了脚本。您尝试在脚本中选择的元素尚未在页面上。这个常见问题有两个简单的解决方案

  • script放在body标记的末尾,以确保所有dom元素都已呈现。
  • 在尝试选择任何dom元素之前,使用onload event确保文档已加载并呈现所有dom元素。