我的目标是有一个按钮，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(更改模板.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;
}
我收到此错误
未捕获的类型错误：无法设置空的属性"innerHTML" 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>
如果你仍然想在 head 中包含你的脚本，反之方法是将代码包装在 DOM 准备就绪时触发的document.onload中。
document.onload = function(e) {
// your code goes here
};