1

Gostaria que os meus botões alterassem a cor toda vez que a pagina for atualizada. Fiz um código em java script que não está dando certo e gostaria de ajuda para identificar o meu erro.

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

Essa seria a forma certa?

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

2 Respostas 2

2

O problema é que document.button não contém todos os botões da tela, use document.querySelectorAll('tag') para isso, depois percorra o array modificando o estilo de cada elemento

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

Além disso precisa que o código javascript carregue depois dos botões, pode colocar no final do html ou usar o atributo defer

Uma opção é criar as variáveis dentro do loop e os botões terão cores diferentes também:

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

Nesse último também usei o template literal para interpolar variáveis e strings, mas é opcional

1

O problema está na forma de selecionar os botões. O document.button não existe.

Uma forma é usando document.querySelectorAll usando como seletor a tag button dentro de form, e depois fazer um laço para alterar todos:

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

Ainda incluí o evento DOMContentLoaded para que o script só seja executado quando o DOM for carregado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .