Javascript Como programar um button para mudar o background-color da pagina em javascrip ?

kn0ve_god · 24 de agosto de 2022

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Computer God</title>

    <link rel="stylesheet" href="pagStyle.css">
    <link rel="stylesheet" href="pag.js">

</head>
<body>
    
    <h1 class="Texto">Computer God.</h1>
    
    <button type="button" class="Button" autofocus onclick="changeColor()" >Color</button>

    <script src="pag.js"></script>

</body>
</html>

JS:

const body = document.querySelector('body')

function changeColor() {
    let bgColor = body.style.backgroundColor = "#FFFA00"
}

basicamente eu tenho um "button" pra mudar o background-color da página a cada click. Esse código muda da cor padrão para amarela. Porém o resultado que eu desejo é : ter x cores e a cada clique no button alterne entre essas x cores. Como posso fazer isso ?

washalbano · 24 de agosto de 2022

Sugestão

const body = document.querySelector('body')
// set colors
const colors = [
  'red',
  'green',
  'blue',
  'gold',
  'firebrick',
  'olive',
  'cyan',
  'magenta',
  'yellow',
  'navy'
]
// set initial color
let colorIndex = 0

function changeColor() {
  body.style.backgroundColor = colors[colorIndex]
  // next index
  colorIndex++
  // if index is equal array.length, then get back to zero
  colorIndex = colorIndex === colors.length ? 0 : colorIndex
}

Niê · 29 de agosto de 2022

Boa tarde.

Da uma olhadinha nesse meu codepen:

https://codepen.io/devbrendon/pen/abYWPro

Basicamente criei as cores padrões no root do css, depois uma classe para o .darkMode - em seguida o botão que possui a função de troca das cores. Pra armazenar, basta usar localstorage.