Von Javascript externer Datei kann nicht id aus HTML-Datei erhalten und den Inhalt

HTML-Code ersetzen:Von Javascript externer Datei kann nicht id aus HTML-Datei erhalten und den Inhalt

<!DOCTYPE HTML> 
    <html> 
     <head> 
     <meta charset="utf-8"> 
     <script src="index.js"></script> 
     <title>Design All</title> 
     </head> 
    <body> 
     <h2>------------------------</h2> 
     <h1 id="test">Should this change?!</h1> 
     <h2>------------------------</h2> 
    </body> 
</html>

Externer JavaScript-Code:

var product = "Camera"; 
var price = 130; 
var introduction = document.getElementById("test"); 
introduction.innerHTML = product + " " + price;

Hinweis: 1. Wenn ich einen Funktionsaufruf verwende, ist es funktioniert. 2. Wenn ich das Skript innerhalb der HTML-Datei schreibe, funktioniert es auch. 3. Ich benutze jsfiddle, es zeigt vollkommen in Ordnung.

Kann mir jemand bei diesem Problem helfen?

Quelle

2016-06-29 hyperup

Haben Sie sicherstellen, dass das Dokument, bevor Sie fortfahren geladen wird? – Li357

Ihr Javascript wird geladen und ausgeführt, bevor der Body geladen wird aka das DOM ist noch nicht fertig. Verwenden Sie eine Bibliothek wie jQuery, die Rückrufe für Ereignisse wie DOMready bietet. – mondjunge

Eines muss man klar sein müssen, dass HTML sequentiell geladen.
In Ihrem Code

........................... 
<script src="index.js"></script> 
................ 
.................... 
<h1 id="test">Should this change?!</h1>

Hier ist das JavaScript geladen, um die restlichen html zuerst dann.
Da JavScript ausgeführt wird, wenn es für die Art, wie Sie es schreiben, geladen wird, wird es die späteren HTML-Tags nicht finden. Also wird es dieses Element nicht bekommen (<h1 id="test">Should this change?!</h1>).

Aber wenn Sie die JS später laden, dann wird es wie erwartet funktionieren.

<!DOCTYPE HTML> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Design All</title> 
    </head> 
<body> 
    <h2>------------------------</h2> 
    <h1 id="test">Should this change?!</h1> 
    <h2>------------------------</h2> 
</body> 
<script src="index.js"></script>

Das ist, warum Experten empfehlen JS am Ende zu laden.

Quelle

2016-06-29 06:13:03 Saif

Ich denke, HTML war noch nicht geladen. Verwenden Sie onload Attribut auf Körper, um sicherzustellen, DOM geladen ist:

<!DOCTYPE HTML> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <script> 
    var myFunction = function() { 
     var product = "Camera"; 
     var price = 130; 
     var introduction = document.getElementById("test"); 
     introduction.innerHTML = product + " " + price; 
    } 
    </script> 
    <title>Design All</title> 
    </head> 
<body onload="myFunction()"> 
    <h2>------------------------</h2> 
    <h1 id="test">Should this change?!</h1> 
    <h2>------------------------</h2> 
</body>

Quelle

2016-06-29 06:07:27 Silvinus

<!DOCTYPE HTML> 
    <html> 
     <head> 
     <meta charset="utf-8"> 
     <title>Design All</title> 
     <script src="index.js"></script>   
</head> 
    <body onload = "chng()"> 
     <h2>------------------------</h2> 
     <h1 id="test">Should this change?!</h1> 
     <h2>------------------------</h2> 
    </body> 
</html>

index.js

// JavaScript 
function chng(){ 
var product = "Camera"; 
var price = 130; 
var introduction = document.getElementById("test"); 
introduction.innerHTML = product + " " + price; 
}

Quelle

2016-06-29 06:13:32 frnt

Von Javascript externer Datei kann nicht id aus HTML-Datei erhalten und den Inhalt

Antwort

Verwandte Themen