Javascript kann nicht innerHTML Button mit ID, weil es "Null"

ist Mein Ziel ist es, eine Schaltfläche zu haben, die onclick eine Funktion aufrufen wird, um das Styling des HTML-Tags und den Text (oder innerHTML) der Schaltfläche selbst zu ändern. Sollte nicht so schwer sein, oder? Nun ...Javascript kann nicht innerHTML Button mit ID, weil es "Null"

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 (Wechsel 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; 
}

Und ich m Erhalte diesen Fehler

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

Also bitte helfen Sie mir, es ist 90 Grad und ich sitze hier am Rande des Hungers über dieses einfache Thema gestresst und kann kaum denken.

Quelle

2017-07-08 TheCaliCoder

Das liegt daran, Ihr Skript wird geparst, Ereignis bevor die Elemente in der DOM verfügbar sind. Wenn der Parser auf var button = document.getElementById('template-button'); stößt, ist das Element im DOM noch nicht verfügbar.

Aufgrund dessen macht Ihr Code das technisch.

undefined.innerHTML

Bewegen Sie den Skript-Tag gerade über dem Schließkörper-Tag. Dies wird das Problem beheben, da die Elemente in DOM verfügbar sind, wenn sie in den Variablen gespeichert werden.

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

wenn Sie noch Ihr Skript im Kopf enthalten sein sollen, ist umgekehrt den Code in document.onload wickeln, die ausgelöst wird, wenn das DOM bereit ist.

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

Quelle

2017-07-08 00:41:28

Sir/Ma'am, Sie haben mich vor dem Wahnsinn gerettet. Ich fühle mich wie ein Idiot, der das vergisst. Es ist wie 'function functionName() {}' in Javascript, es kann schon vor der Definition aufgerufen werden, aber 'var function = function() {}' kann nicht. Also bin ich nicht an diese Bestellung gewöhnt. Ich gehe jetzt essen gehen. – TheCaliCoder

Javascript kann nicht innerHTML Button mit ID, weil es "Null"

Antwort

Verwandte Themen