イム、以下に示すように、WebインスペクタでエラーになっていないJavaScriptエラーNullがオブジェクト
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;
}
なぜエラーが表示されるのですか？
要素が定義された後、DOM readyコールバックを使用するか、ソースをHTMLの要素の下に配置するようにコードを配置します。
document.getElementById()要素が見つからない場合はnullを返します。プロパティの割り当ては、オブジェクトに対してのみ行うことができます。 nullはオブジェクトではありません（typeofとは異なります）。
こんにちは、私はソースを移動した迅速な返信のおかげでアレックス。 Javascriptを初めて使うと、DOM準備完了コールバックが何であるか説明できますか？しかし、あなたの答えに感謝しました:) –
@マークH私はできましたが、[ここでは良い説明です]（http://stackoverflow.com/questions/978740/javascript-how-to-detect-if-document-has-ロードされた - ie-7-firefox-3）。 – alex
このエラーが発生しました。この回答は不明です。アレックスは「HTMLの要素の下にソースを置く」ことを意味するのですか？ – LaurelS
後で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>
私は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>
は楽しみを持って何をするのかであります！
DOM要素を実行して処理するJSコードは、DOM要素が作成された後に実行する必要があります。 JSコードは、HTMLにレイアウトされているように上から下に解釈されます。 DOM要素の前にタグがある場合、スクリプトタグ内のJSコードはブラウザがHTMLページを解析するときに実行されます。
あなたのケースでは、DOMインタラクティブなコードを関数の中に入れて、関数だけが定義されていても実行されないようにすることができます。
次に、ドキュメントの読み込みにイベントリスナーを追加して、関数を実行することができます。要素が定義されていませんので、あなたは、このイベントは、あなたの要素を定義しますwindow.onloadイベントを追加する必要があるので、私はエラーを考えるhttp://jsfiddle.net/poonia/qQMEg/4/
- で
<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>
フィドル：あなたのような何かを与える
ウィンドウがロードされたとき。
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;
}
}
これは問題ではありませんが、ボタンの 'click'イベントハンドラではなく、フォーム上で' submit'イベントハンドラを使用することをお勧めします。そうすれば、誰かがエンターを押してもうまくいく。 – icktoofay