Estoy tratando de establecer el color de fondo de un div al cargar la página en azul. Luego, quiero recorrer 3 colores diferentes (rojo, amarillo y verde) cuando se hace clic y que permanezca el color seleccionado. A continuación se muestra mi código de muestra. Puede ver que los dos primeros no hacen nada cuando se hace clic debido a la configuración del color azul en la carga. No cargué el tercer div en azul al cargar para mostrar cómo quiero que actúe el comportamiento una vez que se hace clic. Cualquier ayuda es apreciada.
function colorload() { var element = document.getElementById("day1"); element.style.backgroundColor = "blue"; var element = document.getElementById("day2"); element.style.backgroundColor = "blue"; } function changeColor(e, numb) { var color = e.className; e.className = (color == 'red') ? 'amber' : (color == 'amber') ? 'green' : (color == 'green') ? 'red' : 'undefined'; } <style onload="colorload()"> .red {background-color:red;} .amber {background-color:yellow;} .green {background-color:green;} div { width:200px; height:100px; margin:50px; text-align: center; vertical-align: middle; line-height: 90px; font-weight:bold; user-select: none; cursor:pointer; } </style> <html> <body> <div class="red" id="day1" onclick="changeColor(this, 1)">One</div> <div class="green" id="day2" onclick="changeColor(this, 2)">Two</div> <div class="amber" id="day3" onclick="changeColor(this, 3)">Three</div> </body> </html>Hice una actualización de sus códigos html y JS , usé en este ejemplo .style en lugar de clases css, si está interesado en usar clases, puede consultar mis comentarios y este enlace en mdn es bastante simple.
archivo html
<html> <body> <!-- i used .btn class and data-col to play with indexes --> <div class="btn" id="day1" data-col="0" onclick="changeColor(event)">One</div> <div class="btn" id="day2" data-col="0" onclick="changeColor(event)">Two</div> <div class="btn" id="day3" data-col="0" onclick="changeColor(event)">Three</div> </body> </html>archivo js
let divs; let colors = ['blue', 'red', 'green' , 'yellow']; // when loading the page, we are catching all divs having the class "btn" // to render it with Blue background document.body.onload = function() { divs = document.querySelectorAll('.btn'); divs.forEach(btn => { const selectedColorIndex = btn.dataset.col; btn.style = 'background:'+colors[selectedColorIndex]; }); }; function changeColor(e) { // catch the clicked div which passed by the "event" value in the html file let divElement = e.target; // get data-col value and convert it to number with (+) const selectedColorIndex = +divElement.dataset.col; // check if we have a next color or get the red index const nextSelectedColor = selectedColorIndex +1 >= colors.length?1:selectedColorIndex+1; // update data-col with the next new color index to conserve the iteration (loop) divElement.dataset.col = nextSelectedColor; // if you want to use classes you can access with // .classList.add(..) and .classList.remove(..) OR // .classList.toggle(..) divElement.style = 'background:'+ colors[nextSelectedColor]; // update the element background with selected color }También puede reproducir los mismos códigos o actualizar: aquí está el código reproducido completo en JSFiddle que hice para que sea más fácil.