¿Por qué mi código no funciona?
Quiero verificar si el color del párrafo es blanco (es blanco debido al css) y cuando es blanco quiero cambiarlo a negro para que sea visible
function myFunction() { if (document.getElementById("lol").style.color === "white") { document.getElementById("lol").style.color = "black"; } } p { color: white; } <button onclick="myFunction()">Try it</button> <p id="lol">adadada</p>El elemento no tiene esa propiedad porque está definido en la clase css. necesita definirlo en línea o con javascript.
function myFunction() { if (document.getElementById("lol").style.color === "white") { document.getElementById("lol").style.color = "black"; } } p { /* this is useless now */ color: white; } <button onclick="myFunction()">Try it</button> <p id="lol" style="color: white;">adadada</p>No sabe el color en el momento de la prueba porque el color no está en línea. Debe verificar el estilo calculado o simplemente usar un ternario
function myFunction() { const lol = document.getElementById("lol"); console.log(window.getComputedStyle(lol, null).color) // the above is too complicated so why not just change to black if not black? lol.style.color = lol.style.color === "black" ? "white" : "black"; } p { color: white; } <button onclick="myFunction()">Try it</button> <p id="lol">adadada</p>Mejor: alternar la clase
function myFunction() { const lol = document.getElementById("lol"); console.log(lol.classList.contains("white")); // can be used or just toggle lol.classList.toggle("white") } .white { color: white; } <button onclick="myFunction()">Try it</button> <p id="lol" class="white">adadada</p>