Estoy tratando de cambiar el color de fondo de este cuadro div cada vez que se hace clic. Por alguna razón, la función solo funciona cuando hago clic dos veces en el mismo cuadro div. ¿Me estoy perdiendo de algo?
function selected_platz(platz_id) { if(document.getElementById(platz_id).style.backgroundColor == "rgb(0, 168, 0)") { document.getElementById(platz_id).style.backgroundColor = "blue"; return; } document.getElementById(platz_id).style.backgroundColor = "rgb(0, 168, 0)"; } <div class='div_platz' onclick='selected_platz(this.id)' id='".$row['platz_id']."'>".$counter."</div>element.style se refiere solo a estilos en línea (estilo a través del atributo HTML style="background-color: blue;" ). Inicialmente, su elemento no tiene tal atributo.
Use una clase CSS selected en su lugar, y alterne eso al hacer clic:
.div_platz { background-color: rgb(0, 168, 0); } .div_platz.selected { background-color: blue; } <div class='div_platz' onclick='this.classList.toggle("selected")' id='".$row['platz_id']."'>".$counter."</div>Sería aún mejor si tampoco usara detectores de eventos en línea. En su lugar, adjunte el oyente a través de Javascript:
document.addEventListener('DOMContentLoaded', () => { let places = document.querySelectorAll('div.div_platz'); for (const place of places) { place.addEventListener('click', function() { place.classList.toggle('selected'); }) } }); .div_platz { background-color: rgb(0, 168, 0); } .div_platz.selected { background-color: blue; } <div class='div_platz' id='".$row['platz_id']."'>".$counter."</div>Simplemente agregue el color a través de CSS y cambie una clase con un color de fondo azul con .classList.togle('class-name')
function selected_platz(platz_id) { document.getElementById(platz_id).classList.toggle('bg-blue'); } div { background-color: rgb(0, 168, 0); } .bg-blue { background-color: blue; } <div class='div_platz' onclick='selected_platz(this.id)' id='".$row[' platz_id ']."'>".$counter."</div>