这是我的 HTML 和 Javascript，我决定不包含我的 CSS，因为我认为不需要。我的代码的目的是创建一个切换开关(如设置应用程序中的 iPhone 设置)，然后使用 javascript 添加事件监听器。我将监听器应用于按钮元素。当我单击按钮时，start() 函数应该激活，正如您所看到的，当 onclick 事件启动时，切换函数应该激活。按下按钮时应该改变背景颜色。然而，它根本不改变颜色。就像切换调用不起作用一样。我可以单独调用切换函数，但这会在页面加载时改变颜色。当我单击按钮时它应该起作用。感谢任何可以帮助我的人。
<!DOCTYPE html>
<html>
<head>
<title>Light Switch</title>
<link rel="stylesheet" href="light.css" />
</head>
<body id="body">
<button id="submit">Submit
<label id="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label>
</button>
<script src="light.js"></script>
</body>
</html>
//This js file was separate from my HTML file and was linked
function start() {
var submit = document.getElementById("submit");
submit.addEventListener("onclick", toggle);
};
function toggle() {
var color = document.getElementById("body");
color.style.backgroundColor = "black";
};
start();
最佳答案
将 onclick 更改为仅 click。而且在这种情况下似乎不需要 start() 函数。
document.getElementById("submit").addEventListener("click", toggle);
function toggle() {
console.log('c')
document.getElementById("body").style.backgroundColor = "black";
};<body id="body">
<button id="submit">Submit
<label id="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label>
</button>
</body>要使用onclick，您不需要addEventListener
var getSubmitButton = document.getElementById("submit");
getSubmitButton.onclick = toggle;
function toggle() {
document.getElementById("body").style.backgroundColor = "black";
};<body id="body">
<button id="submit">Submit
<label id="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label>
</button>
</body>关于javascript - 如何使用事件监听器通过 javascript 更改背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49247816/