Hola, todos. Estoy luchando por hacer un código con 2 colores de botones diferentes que, cuando se hace clic, cambian el valor del color, de modo que cuando hago clic en el div, cambia a ese color. Descubrí que puedo hacerlo la primera vez, pero no puedo volver a llamar a la función para repetir el proceso nuevamente. ¿Alguna sugerencia? Muchas gracias :)
<!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>Document</title> </head> <style> .green { background-color: green; } .red { background-color: red; } #change { border: 1px solid black; width: 500px; height: 500px; } </style> </head> <body> <div id="change"></div> <button id="green-btn">Green</button> <button id="red-btn">Red</button> <script> const gbutton = document.getElementById("green-btn"); const rbutton = document.getElementById("red-btn"); const change = document.getElementById("change"); let color = ""; function changeGreen () { color = "green"; } function changeRed () { color = "red"; } gbutton.addEventListener("click", changeGreen) rbutton.addEventListener("click", changeRed) change.addEventListener("click", () => { if(color == "green") { change.classList.add("green"); } else if (color == "red") { change.classList.add("red"); }}); </script> </body> </html>solo tienes que eliminar otra clase
change.addEventListener("click", () => { console.log('color', color) if (color == "green") { change.classList.add("green"); change.classList.remove("red"); } else if (color == "red") { change.classList.add("red"); change.classList.remove("green"); } });deberías quitar la otra clase
change.classList.add("green") change.classList.remove("red")