How do generate a random color for background when a button is clicked?

Question

I am trying to create a button that generates a new color on a web page background each time the button is clicked. Everything seems to be flowing fine except the javascript portion. I've tried changing my javascript function a number of times and still no solution. :-( Please see my entire code below.

<body>
 <section class="stencil-class" id="my">
   <span class="A">A</span>
   <span class="S">S</span>
   <span class="I">I</span>
   <span class="Aa">A</span>
 </section>

   <button class="js-change" id="js-button" onclick="getRandomColor()">Change</button>

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
   function getRandomColor() {
     var letters = "0123456789ABCDEF";
     var randomColor = "#";
     for(var i = 0; i < 6; i++){
         randomColor += letters[Math.floor(Math.random() * 16777215)]; 
            }
         document.body.style.background-color = randomColor;
         }
   </script>
   </body>

   /*CSS BELOW*/

   :root{
--background-color: #00d9ff;
--font-color: white;
--font-size: 300px;
--text: center;
--font-sizeb: 25px; 
  }
   body{
background-color: #00d9ff;
   }
  .stencil-class{
    text-align: var(--text);
   margin-top: 100px;
   margin-bottom:70px;
   margin-right: 70px;
   margin-left: 70px;
   }
  .A{
   font-size: var(--font-size);
   color: var(--font-color);
   font-family: Sans-serif;
   }
  .S{
    font-size: var(--font-size);
    color: var(--font-color);
    font-family: Sans-serif;
   }
  .I{
    font-size: var(--font-size);
    color: var(--font-color);
    font-family: Sans-serif;
   }
  .Aa{
    font-size: var(--font-size);
    color: var(--font-color);
    font-family: Sans-serif;
   }
   .js-change{
    border: 3px solid #000000;
    background-color: #00d9ff;
    color: var(--font-color);
    text-align: var(--text);
     margin-left: 570px;
     padding: 25px;
    font-size: var(--font-sizeb);
 }

`background-color` --> `backgroundColor` ... check the console error — Temani Afif, Feb 05 '19 at 22:04

score 0 · Accepted Answer · answered Feb 05 '19 at 22:09

you have to use document.body.style.backgroundColor instead of document.body.style.background-color,

and replace 16777215 with letters.length,

function getRandomColor() {
  var letters = "0123456789ABCDEF";
  var randomColor = "#";
  for (var i = 0; i < 6; i++) {
    randomColor += letters[Math.floor(Math.random() * letters.length)];
  }

  document.body.style.backgroundColor = randomColor;
}

<section class="stencil-class" id="my">
  <span class="A">A</span>
  <span class="S">S</span>
  <span class="I">I</span>
  <span class="Aa">A</span>
</section>

<button class="js-change" id="js-button" onclick="getRandomColor()">Change</button>

So when I run the snippet here it works but when I try running it in my browser (Google Chrome) nothing happens when I click the button — AsiaNwoye, Feb 05 '19 at 23:01

score 0 · Answer 2 · answered Feb 05 '19 at 22:16

As point out before me you have error with background color. Anyway try this short version of what you want:

<button class="js-change" id="js-button" onclick="getRandomColor()">Change</button>
<script>
function getRandomColor() {document.body.style.backgroundColor = '#'+(Math.random()*0xFFFFFF<<0).toString(16);}
</script>

How do generate a random color for background when a button is clicked?

2 Answers2