26

以下に示すように、Web Inspector でエラーが発生します。

TypeError: 'null' is not an object (evaluating 'myButton.onclick = function() {
var userName = myTextfield.value;
greetUser(userName);

return false;

}')

ここに私のコード（HTML）があります：

<h2>Hello World!</h2>
<p id="myParagraph">This is an example website</p>

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

<form>
  <input type="text" id="myTextfield" placeholder="Type your name" />
  <input type="submit" id="myButton" value="Go" />
</form>

JS は次のとおりです。

var myButton = document.getElementById("myButton");
var myTextfield = document.getElementById("myTextfield");

function greetUser(userName) {
var greeting = "Hello " + userName + "!";
document.getElementsByTagName ("h2")[0].innerHTML = greeting;
}

myButton.onclick = function() {
var userName = myTextfield.value;
greetUser(userName);

return false;

}

エラーが発生する理由は何ですか?

4

5 に答える 5

41

DOM 対応のコールバックを使用するか、HTML の要素の下にソースを配置して、要素が定義された後に実行されるようにコードを配置します。

document.getElementById()null要素が見つからなかった場合に返します。プロパティの割り当ては、オブジェクトに対してのみ行うことができます。nullはオブジェクトではありません (typeof言うこととは逆です)。

于 2013-01-08T03:49:26.383 に答える
6

DOM 要素を実行して処理する JS コードは、DOM 要素が作成された後に実行する必要があります。JS コードは、HTML に配置されているように上から下に解釈されます。そのため、DOM 要素の前にタグがある場合、スクリプト タグ内の JS コードは、ブラウザーが HTML ページを解析するときに実行されます。

したがって、あなたの場合、DOM 対話コードを関数内に配置して、関数のみを定義し、実行しないようにすることができます。

次に、ドキュメント ロード用のイベント リスナーを追加して、関数を実行できます。

それはあなたに次のようなものを与えるでしょう：

<script>
  function init() {
    var myButton = document.getElementById("myButton");
    var myTextfield = document.getElementById("myTextfield");
    myButton.onclick = function() {
      var userName = myTextfield.value;
      greetUser(userName);
    }
  }

  function greetUser(userName) {
    var greeting = "Hello " + userName + "!";
    document.getElementsByTagName ("h2")[0].innerHTML = greeting;
  }

  document.addEventListener('readystatechange', function() {
    if (document.readyState === "complete") {
      init();
    }
  });

</script>
<h2>Hello World!</h2>
<p id="myParagraph">This is an example website</p>

<form>
  <input type="text" id="myTextfield" placeholder="Type your name" />
  <input type="button" id="myButton" value="Go" />
</form>

フィドル - http://jsfiddle.net/poonia/qQMEg/4/

于 2013-01-08T04:20:18.307 に答える
2

要素が未定義であるため、エラーだと思います。そのためwindow.onload、ウィンドウがロードされたときにこのイベントが要素を定義するイベントを追加する必要があります。

window.addEventListener('load',Loaded,false);


    function Loaded(){
    var myButton = document.getElementById("myButton");
    var myTextfield = document.getElementById("myTextfield");

    function greetUser(userName) {
    var greeting = "Hello " + userName + "!";
    document.getElementsByTagName ("h2")[0].innerHTML = greeting;
    }

    myButton.onclick = function() {
    var userName = myTextfield.value;
    greetUser(userName);

    return false;
    }
    }
于 2013-01-08T04:31:08.337 に答える
1

後でJavaScriptをロードしてみてください。

これを試して：

<h2>Hello World!</h2>
<p id="myParagraph">This is an example website</p>

<form>
  <input type="text" id="myTextfield" placeholder="Type your name" />
  <input type="submit" id="myButton" value="Go" />
</form>

<script src="js/script.js" type="text/javascript"></script>
于 2013-01-08T03:56:23.380 に答える
0

DOMがロードされていることを確認することについて、アレックスに同意します。また、送信ボタンが更新をトリガーすると思います。

これは私がすることです

<html>
<head>
<title>webpage</title>
</head>
<script type="text/javascript">
var myButton;
var myTextfield;

function setup() {
  myButton = document.getElementById("myButton");
  myTextfield = document.getElementById("myTextfield");
  myButton.onclick = function() {
    var userName = myTextfield.value;
    greetUser(userName);
    return false;
  }
}

function greetUser(userName) {
  var greeting = "Hello " + userName + "!";
  document.getElementsByTagName("h2")[0].innerHTML = greeting;
}

</script>
<body onload="setup()">
  <h2>Hello World!</h2>
  <p id="myParagraph">This is an example website</p>

  <form>
    <input type="text" id="myTextfield" placeholder="Type your name" />
    <input type="button" id="myButton" value="Go" />
  </form>
  </body>
</html>

楽しんで！

于 2013-01-08T04:07:44.603 に答える