"null"のため、JavascriptでidのボタンのinnerHTMLを設定できません

私の目標は、ボタン自体のhtmlタグとテキスト（またはinnerHTML）のスタイルを変更するボタンをonclickが呼び出すことです。それほど難しいはずはありませんか？うーん..."null"のため、JavascriptでidのボタンのinnerHTMLを設定できません

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>New look for my site!</title> 
    <link rel="stylesheet" type="text/css" href="main.css"> 
    <script src="change-template.js"></script> 
</head> 
<body> 
    <aside> 
    <button type="button" id="template-button" onclick="changeTemplate()">Nightmode: On</button> 
    </aside> 
    <main> 
    <h1>New page look for my site</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </main> 
</body> 
</html>

CSS（のmain.css）：

html{ 
    background: "#111"; 
    color: "#0F0"; 
}

JS（変更template.js）：

var html = document.getElementsByTagName('html')[0]; 
var button = document.getElementById('template-button'); 
var nightmode = true; 

function changeTemplate(){ 
    //change to lighter color if black and vice versa 
    if(nightmode){ 
    html.style.background = "#EEE"; 
    html.style.color = "#000"; 
    button.innerHTML = "Nightmode: OFF"; 
    }else{ 
    html.style.background = "#111"; 
    html.style.color = "#0F0"; 
    button.innerHTML = "Nightmode: ON"; 
    } 
    nightmode = !nightmode; 
}

そして、私は」このエラーが発生する

Uncaught TypeError: Cannot set property 'innerHTML' of null at changeTemplate (change-template.js:10) at HTMLButtonElement.onclick (new-look.html:11)

私は90度のお手伝いをしてください。この単純な問題について強調している飢えの寸前でここに座っていて、ほとんど考えられません。

出典

2017-07-08 TheCaliCoder

DOMで要素が利用可能になる前に、スクリプトが解析されているためです。

パーサーがvar button = document.getElementById('template-button');に遭遇すると、その要素はまだDOMで利用できません。

あなたのコードは技術的にこれを行っています。

undefined.innerHTML

ちょうど終了bodyタグ上記のスクリプトタグを移動し

。変数が変数に格納されると、要素がDOMで利用可能になるため、問題が修正されます。

</main> 
    <script src="change-template.js"></script> 
</body>

あなたがまだ頭の中でスクリプトを含めたい場合は、周りの他の方法は、DOMの準備ができているとき、トリガーdocument.onload内のコードをラップです。

document.onload = function(e) { 
    // your code goes here 
};

出典

2017-07-08 00:41:28

あなたは私を狂人から救ってくれました。私はこれを忘れるばか者のように感じる。これはjavascriptの 'function functionName（）{}'のように、定義の前でも呼び出せますが、 'var function = function（）{}'はできません。だから私はこの命令に慣れていない。私は今食べに行くつもりです。 – TheCaliCoder

"null"のため、JavascriptでidのボタンのinnerHTMLを設定できません

答えて

関連する問題