gpt4 book ai didi

javascript - 如何使用事件监听器通过 javascript 更改背景

转载 作者:行者123 更新时间:2023-12-03 02:18:58 27 4
gpt4 key购买 nike

这是我的 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/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com