0

这段代码有什么问题？我在 IE10 和 Firefox 中对其进行了测试，但click没有引发该事件。

  <html>
  <head>
  <title>Sandbox</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

  <style type="text/css" media="screen">
  #t1, #t2 { border: 2px solid gray; }
  #t2 { background-color: pink; }
  </style>

  <script>
  // Function to change the content of t2
  function modifyText(new_text) {
    var t2 = document.getElementById("t2");
    t2.firstChild.nodeValue = new_text;    
  }

  // Function to add event listener to table
  var el = document.getElementById("outside");
  el.addEventListener("click", function(){modifyText("four")}, false);
  </script>

  </head>

  <body>
  <table id="outside">
      <tr><td id="t1">one</td></tr>
      <tr><td id="t2">two</td></tr>
  </table>
  </body>
  </html>
4

2 回答 2

3

在 DOM 准备好之前，您的 JavaScript 正在运行：

Uncaught TypeError: Cannot call method 'addEventListener' of null

在 DOM 准备好之前，您无法可靠地与它进行交互，因此请将您的 JavaScript 移动到正文的底部。

以防万一您正在考虑使用，在加载所有window.load = function() {...}资源之前，附加到的回调window.load不会运行，这可能不是您想要的。没有简单的纯 JavaScript 替代 jQuery ，但您可以从这里使用一些东西：$(document).ready 没有 jQuery 的等价物$(document).ready()

于 2013-05-12T17:38:56.003 回答
1

利用

window.onload = function() {
  var el = document.getElementById("outside");
  el.addEventListener("click", function(){modifyText("four")}, false);
}
于 2013-05-12T17:40:17.727 回答