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重置为空字符串

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

尝试下面的工作我会测试它。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript">
            function myFun(){
            var randcol= "";
            var allchar="0123456789ABCDEF";
            for(var i=0; i<6; i++){
               randcol += allchar[Math.floor(Math.random()*16)];


            }

             document.body.style.backgroundColor= "#"+randcol;

            }
    </script>
</head>
<body>
<button onclick="javascript:myFun()">Change color</button>

</body>
</html>

##我们可以将颜色保存到localstorage吗？##

Pure Javascript

2 个答案: