涉及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代码没有按照它应该的方式工作？

回答

相关问题