Javascript innerhtml不在div上工作
[英]Javascript innerhtml not working on div
问题描述
<!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>
Why is document.getElementById("passage").innerHTML = "Paragraph changed!" 
为什么是document.getElementById("passage").innerHTML = "Paragraph changed!" not working for me? 不为我工作？ I just end up with a blank screen, not even the original "hello". 我最后得到一个空白的屏幕，甚至没有原来的“你好”。
4 个解决方案
解决方案1
6 2017-07-02 13:01:54
Your script is called before the element is loaded, try calling the script after loading element 在加载元素之前调用脚本，尝试在加载元素后调用脚本
<!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>
解决方案2
3 2017-07-02 13:04:08
If you check the console, you can see an error 如果您检查控制台，则可以看到错误
Uncaught TypeError: Cannot set property 'innerHTML' of null
That is the HTML page is parsed and executed top down. 这就是自上而下解析和执行HTML页面。
So, it can't identify what is the element you are mentioning. 因此，它无法确定您提到的元素是什么。
So, you should either use an EventListener or place the script just before the end of body tag 因此，您应该使用EventListener或将脚本放在body标记结束之前
Method 1 Event Listener 方法1事件监听器
<!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>
Method 2 : script is just above body tag 方法2：脚本就在body标签之上
<!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>
解决方案3
1 2017-07-02 13:09:04
You script should be executed once the page is loaded. 加载页面后，您应该执行脚本。
Otherwise all elements of the page may not be still attached to the dom when you refer to them. 否则，当您引用它们时，页面的所有元素可能仍未附加到dom。
Rather than moving the script after the element declaration that may be error prone (you should always be aware of the order of script), you could use event designed to be executed after the dom is totally loaded. 而不是在可能容易出错的元素声明之后移动脚本（您应该始终了解脚本的顺序），您可以使用设计为在dom完全加载后执行的事件。
For example onload attribute of body : 例如body onload属性：
<body onload='document.getElementById("passage").innerHTML = "Paragraph changed!";'>
解决方案4
-1 2017-07-02 13:03:20
Your script is calling before element is loaded. 您的脚本在加载元素之前调用。
Try 尝试
$(document).ready(function()
{
document.getElementById("passage").innerHTML = "Paragraph changed!";
});
JS: JS：
(function(){
document.getElementById("passage").innerHTML = "Paragraph changed!";
})
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.