Este es mi primer proyecto JS y no puedo entender dónde me equivoqué, estoy tratando de hacer un flipper de color donde si haces clic en un botón, elige un color aleatorio de una variedad de colores y lo convierte en el color de fondo.
const colors = ["green", "red", "rgba(133,122,200)", "#f15025"]; const button = document.getElementById("btn"); const color = document.querySelector(".color"); button.addEventListener("click", function () { const randomItem = colors[getRandomItem]; document.body.style.backgroundColor = randomItem; color.textContent = randomItem; }); const getRandomItem = function () { return Math.floor(Math.random() * colors.length); } <body> <!-- javascript --> <script src="app.js"></script> <nav> <div class="nav-center"> <h4>color flipper</h4> <ul class="nav-links"> <li><a href="index.html">simple</a></li> <li><a href="hex.html">hex</a></li> </ul> </div> </nav> <main> <div class="container"> <h2>background color : <span class="color">#f1f5f8</span></h2> <button class="btn btn-hero" id="btn">click me</button> </div> </main> </body>En esta línea:
const randomItem = colors[getRandomItem]; no estás llamando a la función. Ponga paréntesis después de escribir su nombre: getRandomItem() .
Retazo
const colors = ["green", "red", "rgba(133,122,200)", "#f15025"]; const button = document.getElementById("btn"); const color = document.querySelector(".color"); button.addEventListener("click", function () { const randomItem = colors[getRandomItem()]; document.body.style.backgroundColor = randomItem; color.textContent = randomItem; }); const getRandomItem = function () { return Math.floor(Math.random() * colors.length); } <body> <!-- javascript --> <nav> <div class="nav-center"> <h4>color flipper</h4> <ul class="nav-links"> <li><a href="index.html">simple</a></li> <li><a href="hex.html">hex</a></li> </ul> </div> </nav> <main> <div class="container"> <h2>background color : <span class="color">#f1f5f8</span></h2> <button class="btn btn-hero" id="btn">click me</button> </div> </main> </body>