Random button colors

Question

Random button colors

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I would like my buttons to change the color every time the page refreshes. I made a java script code that is not working and would like help identifying my error.

<script>
        let r = Math.floor(Math.random()*255),
                g = Math.floor(Math.random()*255),
                b = Math.floor(Math.random()*255);
        document.button.style.backgroundColor='rgb('+r+','+g+','+b+')';
    </script>

Would that be the right way?

<!DOCTYPE html>
<html lang="PT-BR">
<head>
    <meta charset="UTF-8"/>
    <title>Menu inicial</title>
<style>
    @font-face{
    font-family: 'FontLogo';
    src: url("../_fonts/bubblegum-sans-regular.otf");
}
body{
 background-color: lightgrey;  
background-image: url("_imagen/background body menu.jpg");
    background-repeat:no-repeat;
    background-size: 100%; 
}
    section{
        padding: 20px;
        background-color: #4CAF50;
        margin: 0px 200px;
        font-size: 50px;
        text-transform: uppercase;
        text-align: center;
        color: white;
        font-family: 'FontLogo',sans-serif;
        font-weight: bold;
    }
    form {
        padding: 262px;
    margin-left: 200px;
    margin-right: 200px;
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0px solid #f1f1f1;
    background-color: rgba(0,0,0,.6);
    box-shadow: -3px 4px 29px 2px rgba(0,0,0,.6);
}
button{
    padding: 50px;
    margin: 10px;
}
</style>
</head>

<body>
<script>
        let r = Math.floor(Math.random()*255),
                g = Math.floor(Math.random()*255),
                b = Math.floor(Math.random()*255);
        document.button.style.backgroundColor='rgb('+r+','+g+','+b+')';
    </script>
    
    <section id="letrero">menu inicial</section>
    <form>
            <button type="submit">Cadastro</button>
            <button type="submit">Consulta</button>
            <button type="submit">Relatorio</button>
        </form>
</body>
</html>

javascript random html css

asked by anonymous 06.08.2018 / 20:19

2 answers

1

The problem is how to select the buttons. document.button does not exist.

One way is to use document.querySelectorAll by using the button tag as selector within form , and then make a loop to change all:

<!DOCTYPE html>
<html lang="PT-BR">
<head>
    <meta charset="UTF-8"/>
    <title>Menu inicial</title>
<style>
@font-face{
font-family: 'FontLogo';
src: url("../_fonts/bubblegum-sans-regular.otf");
}
body{
background-color: lightgrey;  
background-image: url("_imagen/background body menu.jpg");
background-repeat:no-repeat;
background-size: 100%; 
}
section{
padding: 20px;
background-color: #4CAF50;
margin: 0px 200px;
font-size: 50px;
text-transform: uppercase;
text-align: center;
color: white;
font-family: 'FontLogo',sans-serif;
font-weight: bold;
}
form {
padding: 262px;
margin-left: 200px;
margin-right: 200px;
margin-top: 20px;
margin-bottom: 20px;
border: 0px solid #f1f1f1;
background-color: rgba(0,0,0,.6);
box-shadow: -3px 4px 29px 2px rgba(0,0,0,.6);
}
button{
padding: 50px;
margin: 10px;
}
</style>
</head>

<body>
<script>
document.addEventListener("DOMContentLoaded", function(){
   let r = Math.floor(Math.random()*255),
   g = Math.floor(Math.random()*255),
   b = Math.floor(Math.random()*255);
   let butons = document.querySelectorAll("form button");
   for(var x=0; x<butons.length; x++){
      butons[x].style.backgroundColor='rgb('+r+','+g+','+b+')';
   }
});
</script>
    
<section id="letrero">menu inicial</section>
<form>
   <button type="submit">Cadastro</button>
   <button type="submit">Consulta</button>
   <button type="submit">Relatorio</button>
</form>
</body>
</html>

I still include the DOMContentLoaded event so that the script is only executed when the DOM loads.

06.08.2018 / 20:28

How to get a value via GET and others via POST at the same time? menu marked according to the page with php

score 2 · Accepted Answer

The problem is that document.button does not contain all the buttons on the screen, use document.querySelectorAll('tag') for this, then scroll through the array modifying the style of each element

<!DOCTYPE html>
<html lang="PT-BR">
<head>
  <meta charset="UTF-8" />
  <title>Menu inicial</title>
  <style>
    @font-face {
      font-family: 'FontLogo';
      src: url("../_fonts/bubblegum-sans-regular.otf");
    }
    
    body {
      background-color: lightgrey;
      background-image: url("_imagen/background body menu.jpg");
      background-repeat: no-repeat;
      background-size: 100%;
    }
    
    section {
      padding: 20px;
      background-color: #4CAF50;
      margin: 0px 200px;
      font-size: 50px;
      text-transform: uppercase;
      text-align: center;
      color: white;
      font-family: 'FontLogo', sans-serif;
      font-weight: bold;
    }
    
    form {
      padding: 262px;
      margin-left: 200px;
      margin-right: 200px;
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0px solid #f1f1f1;
      background-color: rgba(0, 0, 0, .6);
      box-shadow: -3px 4px 29px 2px rgba(0, 0, 0, .6);
    }
    
    button {
      padding: 50px;
      margin: 10px;
    }
  </style>
</head>

<body>
  <section id="letrero">menu inicial</section>
  <form>
    <button type="submit">Cadastro</button>
    <button type="submit">Consulta</button>
    <button type="submit">Relatorio</button>
  </form>

  <script>
    let r = Math.floor(Math.random() * 255),
      g = Math.floor(Math.random() * 255),
      b = Math.floor(Math.random() * 255);

    let btns = document.querySelectorAll('button')
    for(button of btns)
      button.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
  </script>
</body>
</html>

In addition you need the javascript code to load after buttons, you can put it at the end of the html or use the defer attribute

One option is to create the variables inside the loop and the buttons will have different colors too:

let btns = document.querySelectorAll('button')
for(button of btns) {
    let r = Math.floor(Math.random() * 255),
        g = Math.floor(Math.random() * 255),
        b = Math.floor(Math.random() * 255);

  button.style.backgroundColor = 'rgb(${r}, ${g}, ${b})';
}

In the latter I also used the literal template to interpolate variables and strings, but it is optional