Jua*_*n94 2 html javascript css
每一个人.我希望你能在这里帮助我,我试图通过点击按钮来改变我的文档正文部分的颜色.
有三个按钮,每个按钮设置一个背景颜色.问题是:当我点击其中一个时,它会将背景颜色改变一秒钟,然后它会返回到原来设置的颜色,这是我的代码示例:
<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');
}
它只输入每个按钮[].on ...赋值并将背景设置保留为最后一个赋值,在这种情况下为蓝色.
我不是专家,所以也许我对js的html缺少一些东西.
如果没有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>节点 - 它们将自行运行并且符合标准.