在Pure Javascript中每次单击都会更改背景颜色

Question

我试图在Javascript中创建一个按钮,当单击时,将背景颜色更改为随机颜色.

我的代码在第一次点击时运行正常但不适用于后续点击.

我可以做什么来解决这个问题在纯javascript中,没有任何jquery.谢谢!

var buton=document.getElementById("buton");
var randcol= "";
var allchar="0123456789ABCDEF";

buton.addEventListener("click",myFun);

function myFun(){

for(var i=0; i<6; i++){
   randcol += allchar[Math.floor(Math.random()*16)];
}
document.body.style.backgroundColor= "#"+randcol;
}

Answer 1

问题是你没有重置randcol一次执行.您继续添加到先前的值,因此它第一次是有效的颜色代码,但下次它不是有效的颜色代码.

因此randcol,在执行for循环之前将重置为空字符串

var buton=document.getElementById("buton");
var allchar="0123456789ABCDEF";

buton.addEventListener("click",myFun);

function myFun(){
  var  randcol= "";
for(var i=0; i<6; i++){
   randcol += allchar[Math.floor(Math.random()*16)];
}
document.body.style.backgroundColor= "#"+randcol;
}

<button id="buton">click me</button>