A continuación se muestra mi código. Estoy tratando de generar un color hexadecimal aleatorio que reemplazará el color de fondo cuando se haga clic en mi botón, pero no puedo hacer que funcione.
índice.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Color Changer</title> </head> <body> <h1> <button id="newColor">Click Me</button> </h1> </body> </html>scripts.js
const btn = document.getElementById("newColor"); btn.addEventListener("click", function onClick(event) { let randColor = "#" + Math.floor(Math.random()*16777215).toString(16); document.body.style.backgroundColor = randColor; }); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Color Changer</title> <script src="scripts.js"></script> </head> <body> <h1> <button id="newColor">Click Me</button> </h1> // or include here //<script src="scripts.js"></script> </body> </html> window.onload = function () { const btn = document.getElementById("newColor"); btn.addEventListener("click", function onClick(event) { let randColor = "#" + Math.floor(Math.random()*16777215).toString(16); document.body.style.backgroundColor = randColor; }); };el código está funcionando, ¿su código js está después de la etiqueta HTML?
const btn = document.getElementById("newColor"); btn.addEventListener("click", function onClick(event) { let randColor = "#" + Math.floor(Math.random()*16777215).toString(16); document.body.style.backgroundColor = randColor; }); <h1> <button id="newColor">Click Me</button> </h1>