Random colors on buttons

Asked

Viewed 843 times

1

I would like my buttons to change color every time the page is updated. I made some java code script that is not working and would like help to identify my mistake. 

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

That would 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 html css random

2 answers

2


The problem is that document.button does not contain all screen buttons, use document.querySelectorAll('tag') for this, then go through the array by 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>

It also needs the javascript code to load afterward buttons, you can put at the end of html or use the attribute defer

One option is to create variables within the loop and buttons will have different colors as well:

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

1

The problem is how to select the buttons. The document.button there is no.

One way is by using document.querySelectorAll using as selector the tag button inside 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 included the event DOMContentLoaded so that the script is only executed when the DOM is loaded.

Browser other questions tagged javascript html css random

You are not signed in. Login or sign up in order to post.