Changing background color with every click in Pure Javascript

Question

I am trying to make a button in Javascript which when clicked, changes the background color to a random color.

My code runs fine on the first click but doesn't work on subsequent clicks.

What can I do to fix this in pure javascript, without any jquery. Thanks!

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

All of the answers are insane, just generate a random color like '#' + Math.random() * 0xFFFFFF and that's it, I don't understand what is all this allchar and loop for. — Azamantes
– Azamantes, Commented Dec 29, 2016 at 6:00

ab29007 · Accepted Answer · 2016-12-29 05:08:01Z

11

The problem is that you are not resetting the randcol once executing. You keep adding to the previous value, hence first time it is a valid color code but next time it is not a valid color code.

So reset your randcol to an empty string before you execute your for loop

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>

edited Dec 29, 2016 at 5:08

answered Dec 29, 2016 at 5:06

ab29007

7,7662 gold badges19 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alexander O'Mara Over a year ago

Please explain why this changes is needed (I know why, but code-only answer's aren't the greatest).

ab29007 Over a year ago

@AlexanderO'Mara Thank you for that, I just added it.

Ahmed El Sheikh · Accepted Answer · 2018-05-03 06:46:35Z

3

Try below its working i will test it.

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

## can we saved color to localstorage ?##

edited May 3, 2018 at 6:46

Ahmed El Sheikh

732 silver badges12 bronze badges

answered Dec 29, 2016 at 5:13

user247217

3941 silver badge9 bronze badges

Comments

EhsanMTD · Accepted Answer · 2022-03-04 05:44:13Z

0

// easy option

let btnChange = document.querySelector(".btnColorChange")
let showColorName = document.querySelector(".colorName")

btnChange.addEventListener("click", function(){
   let color = '#';
   //create random number and small the number with slice concat with color = #
   color +=  random = Math.random().toString(16).slice(2,8);
   // select the body tag 
   document.body.style.backgroundColor = color
   // show the color name in screen 
   showColorName.innerHTML = color
})

answered Mar 4, 2022 at 5:44

EhsanMTD

11 bronze badge

Collectives™ on Stack Overflow

Changing background color with every click in Pure Javascript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related