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まで実行されません。jQuery の に代わる単純なプレーンな JavaScript はありませんが、ここから何かを使用できます: $(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 に答える