Question

我正在编写一个包含多个div的代码，这些div使用按钮在单击时更改div的背景颜色。 div的背景被硬编码到html中：例如：

<div style="background-color: grey">
</div>

单击按钮时，我希望背景颜色永久更改为白色。但是，颜色只会瞬间变为白色。代码是这样的：

<script>
    var divs=document.getElementsByTagName("div");
    function noColors(){
        for(i=0;i<divs.length;i++){
        divs[i].style.backgroundColor="white";
        }
    };
</script>
<form>
    <button onclick="noColors()"> I HATE THESE COLORS!!! </button>
</form>

任何帮助将不胜感激

Answer 1

删除form代码：

<button onclick="noColors()"> I HATE THESE COLORS!!! </button>
<div style="width: 100px;height: 100px; background-color: red"></div>
<div style="width: 100px;height: 100px; background-color: yellow"></div>
<div style="width: 100px;height: 100px; background-color: blue"></div>
<script>
var divs=document.getElementsByTagName("div");
function noColors(){
  for(i=0;i<divs.length;i++){
    divs[i].style.backgroundColor="white";
  }
};
</script>

当使用表单标记并单击按钮时，颜色会更改，但表单也会提交，这会导致重新加载页面。这样你就会失去div元素的颜色。

Onclick没有创造永久性的变化

1 个答案: