2017-07-02 8 views
2
<!DOCTYPE html> 
<html> 

<head> 
    <script> 
     document.getElementById("passage").innerHTML = "Paragraph changed!"; 
    </script> 
</head> 

<body> 

    <div id="passage">hello</div> 
    <div id="question"></div> 
    <div id="answers"></div> 

</body> 

</html> 

Warum ist document.getElementById("passage").innerHTML = "Paragraph changed!" nicht für mich arbeiten? Ich habe nur einen leeren Bildschirm, nicht einmal das Original "Hallo".Javascript innerHTML- arbeiten nicht auf div

Antwort

5

Ihr Skript aufgerufen wird, bevor das Element geladen wird, versuchen Sie das Skript nach dem Laden Element Aufruf

<!DOCTYPE html> 
<html> 
    <head> 
    </head> 
    <body> 
     <div id="passage">hello</div> 
     <div id="question"></div> 
     <div id="answers"></div> 
     <script> 
     document.getElementById("passage").innerHTML = "Paragraph changed!"; 
     </script> 
    </body> 
</html> 
+0

Ich sehe, es funktioniert jetzt! Vielen Dank. –

+0

@SrinivasML Bitte versuchen Sie, zusätzliche Leerzeichen im Codeblock zu entfernen. FYI du kannst es auch als Snippet machen. –

-2

Ihr Skript anruft, bevor Element geladen wird.

Versuchen

$(document).ready(function() 
{ 
    document.getElementById("passage").innerHTML = "Paragraph changed!"; 
    }); 

JS:

(function(){ 
document.getElementById("passage").innerHTML = "Paragraph changed!"; 
}) 
+1

Warum wird es abgelehnt? – techhunter

+0

Sie sind besser dran, wenn Sie den Code aus Gründen des Best Practice einfach an den unteren Rand des Dokuments stellen. Außerdem wurde jQuery in der Frage nie erwähnt. –

+1

Ich habe deinen ersten Punkt nicht bekommen. und bezüglich des zweiten Punktes habe ich jquery und js beide gepostet. – techhunter

3

Wenn Sie die Konsole überprüfen, können Sie einen Fehler sehen

Uncaught TypeError: Cannot set property 'innerHTML' of null

Das ist die HTML-Seite wird analysiert und oben ausgeführt nach unten .

So kann es nicht identifizieren, was das Element ist, das Sie erwähnen.

Also, sollten Sie entweder einen Eventlistener verwenden oder das Skript platzieren kurz vor dem Ende des Body-Tag

Methode 1 Ereignis-Listener

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 
<script> 
 
window.onload=function(){ 
 
    document.getElementById("passage").innerHTML = "Paragraph changed!"; 
 
}; 
 
</script> 
 
<body> 
 

 
<div id = "passage">hello</div> 
 
<div id = "question"></div> 
 
<div id = "answers"></div> 
 

 
</body> 
 
</html>

Methode 2: Skript ist nur über body tag

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
</head> 
 

 
<body> 
 

 
<div id = "passage">hello</div> 
 
<div id = "question"></div> 
 
<div id = "answers"></div> 
 
<script> 
 
document.getElementById("passage").innerHTML = "Paragraph changed!"; 
 
</script> 
 
</body> 
 
</html>

1

Ihr Skript sollte ausgeführt werden, sobald die Seite geladen ist.
Andernfalls sind alle Elemente der Seite möglicherweise nicht immer noch an das Dom angehängt, wenn Sie auf sie verweisen. Anstatt das Skript nach der Elementdeklaration zu verschieben, die fehleranfällig sein kann (Sie sollten sich immer der Reihenfolge des Skripts bewusst sein), könnten Sie das Ereignis verwenden, das nach dem vollständigen Laden des Doms ausgeführt werden soll.
Zum Beispiel onload Attribut body:

<body onload='document.getElementById("passage").innerHTML = "Paragraph changed!";'>