Javascript 单击“不创建永久更改”

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

当我单击按钮时，我希望背景颜色永久更改为白色。但是，颜色仅在瞬间变为白色。守则如下：

<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>

var divs=document.getElementsByTagName（“div”）；
函数noColors（）{
对于（i=0；i删除
表单
标记：

<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>

我讨厌这些颜色！！！
var divs=document.getElementsByTagName（“div”）；
函数noColors（）{
对于（i=0；i可能你可以解释为什么？否则读你答案的人可能想知道这为什么能解决问题（以及问题的实质是什么）。@FelixKling yup，好主意。包括解释！：-）
<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>