JS-Code mit modernizr funktioniert nicht so, wie es sollte?

In einem Versuch zu modernisieren ich den folgenden Code ausgeführt.JS-Code mit modernizr funktioniert nicht so, wie es sollte?

<!DOCTYPE html><html><head> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"> 
</script> 

<script> 
var yes = "yes"; 
var no = "no"; 
</script> 

<script> 
if (Modernizr.audio) { 
document.getElementById("demo").innerHTML = yes; 
} 

else{ 
document.getElementById("demo").innerHTML = no; 
} 
</script> 

</head><body> 

<p id="demo"></p> 

</body></html>

Wenn der Browser ich diesen Code ausführen in tut Stützaudio- (was der Fall ist) sollte es „Ja“ angezeigt, aber es zeigt nur eine leere Seite. Dies ist das erste Mal, dass ich moderniszr benutze, also ertragen Sie mit mir. Was mache ich falsch?

Quelle

2017-06-02 Asif Ali

Wenn das Inline-Skript ausgeführt wird, ist das Element #demo noch nicht geladen und daher nicht vorhanden. Verschieben Sie das Skript unter das Element.

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> 
 

 
<script> 
 
    var yes = "yes"; 
 
    var no = "no"; 
 
</script> 
 

 
<p id="demo"></p> 
 

 
<script> 
 
    if (Modernizr.audio) { 
 
    document.getElementById("demo").innerHTML = yes; 
 
    } else { 
 
    document.getElementById("demo").innerHTML = no; 
 
    } 
 
</script>

Quelle

2017-06-02 20:57:57

, dass es verursacht wird! Ich glaube es nicht! Danke –

Das Problem ist, weil Sie versuchen, innerHTML Ihres p Element zu setzen, sondern vor DOM load.

Sie benötigen Skript in einem Ereignis-Listener hat vollständig zu wickeln für DOMContentLoaded

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"> 
 
</script> 
 

 
<script> 
 
var yes = "yes"; 
 
var no = "no"; 
 
</script> 
 

 
<script> 
 
document.addEventListener('DOMContentLoaded', function() { 
 
    if (Modernizr.audio) { 
 
    document.getElementById("demo").innerHTML = yes; 
 
    } 
 

 
    else{ 
 
    document.getElementById("demo").innerHTML = no; 
 
    } 
 
}); 
 
</script> 
 

 
<p id="demo"></p>

DOMContentLoaded stellt sicher, dass die DOM (Document Object Model) geladen, so dass Sie Elemente innerhalb der DOM abfragen .

Oder, wie Patrick sagte, die script bis zum Ende des body

FYI bewegen Dieses Problem wird durch die Implementierung von Javascript nicht Modernizer

Quelle

2017-06-02 20:58:08

die zusätzliche Zeile, die Sie im Skript hinzugefügt haben, wird verwendet, wenn Sie das Skript nicht unter das Element verschieben möchten? Wie ist Ihre Antwort dufferer von Patrick –

Funktional machen sie beide den gleichen Job. Der einzige Unterschied besteht darin, dass Sie meins vor dem HTML-Code deklarieren können. Am besten folgen Sie der Antwort von Patricks und setzen Sie Ihren JS am Ende Ihres HTML (vor dem schließenden body-Tag). Auf diese Weise ist der HTML-Code bereits geladen, sodass Ihr JS Zugriff auf die Elemente hat. –

JS-Code mit modernizr funktioniert nicht so, wie es sollte?

Antwort

Verwandte Themen