涉及modernizr的JS代碼沒有按照它應該的方式工作？

爲了理解modernizr，我運行了下面的代碼。涉及modernizr的JS代碼沒有按照它應該的方式工作？

<!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>

如果我在運行此代碼的瀏覽器不支持音頻（它一定支持）應該顯示爲「是」，但它顯示只是一個空白頁。這是我第一次使用modernizr，因此忍受着我。我究竟做錯了什麼？

來源

2017-06-02 Asif Ali

當內聯腳本運行時，#demo元素尚未加載，因此不存在。將腳本移動到元素下方。

<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>

來源

2017-06-02 20:57:57

就是它造成的！我不相信它！謝謝 –

的問題是因爲你試圖設置你的p件innerHTML，但DOM load之前。

你需要用你的腳本中的事件偵聽器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確保DOM（文檔對象模型）已經滿載，所以你可以查詢DOM內的元素。

或者，正如帕特里克說，移動script到的body

末FYI此問題是由你的實現Javascript不Modernizer

來源

2017-06-02 20:58:08

您在腳本中添加的額外行是在您不想將腳本移動到元素下方時使用的嗎？你的答案如何從patrick –

功能，他們都做同樣的工作。唯一的區別是你可以在HTML代碼之前聲明我的代碼，最好的做法是遵循Patricks的回答，並將你的JS放在HTML的底部（在關閉'body'標籤之前）。這樣，HTML已經加載，所以你的JS可以訪問元素。 –

涉及modernizr的JS代碼沒有按照它應該的方式工作？

回答

相關問題