我的目标是有一个按钮，onclick 将调用一个函数来更改 html 标记的样式和按钮本身的文本(或 innerHTML)。应该没有那么难吧？嗯……
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>New look for my site!</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script src="change-template.js"></script>
</head>
<body>
<aside>
<button type="button" id="template-button" onclick="changeTemplate()">Nightmode: On</button>
</aside>
<main>
<h1>New page look for my site</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</main>
</body>
</html>
CSS (main.css):
html{
background: "#111";
color: "#0F0";
}
JS (change-template.js):
var html = document.getElementsByTagName('html')[0];
var button = document.getElementById('template-button');
var nightmode = true;
function changeTemplate(){
//change to lighter color if black and vice versa
if(nightmode){
html.style.background = "#EEE";
html.style.color = "#000";
button.innerHTML = "Nightmode: OFF";
}else{
html.style.background = "#111";
html.style.color = "#0F0";
button.innerHTML = "Nightmode: ON";
}
nightmode = !nightmode;
}
我遇到了这个错误
Uncaught TypeError: Cannot set property 'innerHTML' of null at changeTemplate (change-template.js:10) at HTMLButtonElement.onclick (new-look.html:11)
所以请帮助我它是 90 度，我正坐在饥饿的边缘，因为这个简单的问题而感到压力，几乎无法思考。
最佳答案
那是因为，您的脚本在元素在 DOM 中可用之前被解析，事件。
当解析器遇到 var button = document.getElementById('template-button'); 时，该元素在 DOM 中尚不可用。
因为您的代码在技术上是这样做的。
undefined.innerHTML
将脚本标签移动到结束正文标签的正上方。这将解决此问题，因为元素在 DOM 中可用，当它们存储在变量中时。
</main>
<script src="change-template.js"></script>
</body>
如果您仍想在头部包含脚本，另一种方法是将代码包装在 document.onload 中，当 DOM 准备就绪时触发。
document.onload = function(e) {
// your code goes here
};
关于Javascript 无法设置带有 id 的按钮的 innerHTML，因为它是 "null"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44981351/