Изменение цвета фона с каждым щелчком мыши в чистом Javascript

Я пытаюсь сделать кнопку в 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;
}
6
click colors events javascript random

2 ответов

проблема в том, что вы не сброс 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>
7

попробуйте ниже его работы, я проверю его.

<!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 ?##

2