Estaba practicando mi js desde que soy un principiante y estaba tratando de hacer un programa para cambiar el color de fondo, pero cada vez que intentaba usar la manipulación de dom, no pasaba nada. Si alguien sabe por qué sucede, estaría muy agradecido.
fuente 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"> <script src="app.js"></script> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <div class="button-style"> <button class="button">Click me!</button> </div> </body> </html>Código CSS:
body{ background-color: red; } .button{ background:transparent; }Guión js:
const button = document.querySelector('.button') const body = document.querySelector('body') const colors = ['red', 'green', 'blue', 'yellow', 'pink', 'purple'] body.style.backgroundColor = 'violet' button.addEventListener('click', changeBackground) function changeBackground(){ const colorIndex = parseInt(Math.random()*colors.length) body.style.backgroundColor = colors[colorIndex] }