gpt4 book ai didi

Javascript 不会持续更改 html 背景颜色

转载 作者:太空宇宙 更新时间:2023-11-04 14:16:37 24 4
gpt4 key购买 nike

各位。我希望你能在这里帮助我,我正在尝试通过单击按钮通过 javascript 更改文档正文部分的颜色。

一共有三个按钮,每个按钮设置一个背景颜色。问题是:当我单击其中一个时,它会更改背景颜色一秒钟,然后返回到最初设置的颜色,这是我的代码示例:

<html>
<head>
<script type="text/javascript">
function colorish(my_color){
if (my_color === 'gray'){
document.body.style.background = '#CCCCCC';
}else if (my_color === 'orange'){
document.body.style.background = '#FF9900';
}else if (my_color === 'blue'){
document.body.style.background = '#C1DAD6';
} else {
alert('on else');
}
}
</script>
</head>

<body style="background: orange;">
<form>
<button name="back_color" onclick="colorish('gray')">Gy</button>
<button name="back_color" onclick="colorish('orange')">Oe</button>
<button name="back_color" onclick="colorish('blue')">Be</button>
</form>
</body>
</html>

该脚本在我的环境中位于一个单独的文件中,但它完全相同。

如果我在脚本中包含:

onload = selector();

function selector(){
var buttons = document.getElementsByName('back_color');

buttons[0].onclick = colorish('gray');
buttons[1].onclick = colorish('orange');
buttons[2].onclick = colorish('blue');
}

它只是进入每个 buttons[].on... 赋值并将背景设置为最后一个赋值,在本例中为蓝色。

我不是专家,所以关于 html 和 js 可能我缺少一些东西。

最佳答案

没有声明 type对于您的按钮,它们的行为就好像它们是 type="submit" .由于没有配置 action <form> 上的参数元素,action是访问它们的同一页面。这并不是说背景只出现一瞬间然后又恢复正常颜色,页面正在重新加载并默认恢复为该颜色,就像您刚刚加载它一样。

要停止这种行为,请给每个按钮一个 type="button" :

<button type="button" name="back_color" onclick="colorish('gray')">Gy</button>
<button type="button" name="back_color" onclick="colorish('orange')">Oe</button>
<button type="button" name="back_color" onclick="colorish('blue')">Be</button>

附带说明一下,如果您不使用按钮作为表单的一部分来提交数据,则不需要相应的 <form> node - 它们将自行运行并符合标准。

关于Javascript 不会持续更改 html 背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24787321/

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