Question

出于某种原因，任何事件监听器功能都不能在我的浏览器（chrome）上工作，但它们可以在代码笔上工作吗？我在这里待了大约2个小时，有什么想法吗？

代码笔链接：http://codepen.io/koushkilla/pen/JXLVBX

<header>
<script src="pleasegodhelpme.js"></script>
    <h1>Javascript Events</h1>
</header>
<main>
  <h4>Add Numbers:</h4>
  <p>
    <input id="num-one"> + <input id="num-two">
  </p>
  <p id="add-sum"></p>
</main>

JS- FIle：

var numOne = document.getElementById("num-one");
    var numTwo = document.getElementById("num-two");
    var addSum = document.getElementById("add-sum");

numOne.addEventListener("input", add);
numTwo.addEventListener("input", add);

function add() {
  var one = parseFloat(numOne.value) || 0;
  var two = parseFloat(numTwo.value) || 0;

  addSum.innerHTML = "your sum is: " + (one+two);
}

Answer 1

在DOM加载之前，您的Javascript代码会被执行。这意味着您正在使用Javascript代码调用尚未存在的元素。

解决此问题的最简单方法是将<script>标记放在结束<body>标记之前。将Javascript放在页面末尾始终是一个好习惯，因为它也会增加加载时间。

<body>
<header>
    <h1>Javascript Events</h1>
</header>
<main>
    <h4>Add Numbers:</h4>
    <p>
      <input id="num-one"> + <input id="num-two">
    </p>
    <p id="add-sum"></p>
</main>
<script src="pleasegodhelpme.js"></script>
</body>

简单的AddListener，适用于代码笔，但不适用于Chrome浏览器

1 个答案: