Soy muy nuevo en la industria del desarrollo web y tengo algunos problemas para descubrir qué está mal con mi código. Intentando implementar javascript en un fragmento de código con Wordpress usando Divi, pero parece que no puedo entender qué es exactamente lo que está mal. Mis intenciones son cambiar el fondo y el color del texto del botón al hacer clic. ¡Agradecería la ayuda!
<button onClick="firstFunc()"; class="butCol"; style="background-color: transparent; border: none; font-weight: bold; border-radius: 25px; padding: 2px 15px";>LATTES</button> <script> function firstFunc() { var x = document.getElementByClass("butCol"); if (x.style.backgroundColor == "transparent";) { x.style.backgroundColor = "#373975"; x.style.color = "white"}; else { (x.style.backgroundColor = "transparent") }; }; </script>El problema es causado por algunos errores tipográficos. desafortunadamente para muchos y demasiado largo para enumerarlos en los comentarios. Entonces, si esto resuelve el problema por usted, elimine su pregunta voluntariamente:
if (x.style.backgroundColor == "transparent";) { -> eliminar el punto y coma: if (x.style.backgroundColor == "transparent") {x.style.color = "white"}; -> intercambiar el punto y coma y la abrazadera: x.style.color = "white"; }(x.style.backgroundColor = "transparent") -> quite las abrazaderas y termine con un punto y coma: x.style.backgroundColor = "transparent";getElementByClass solo getElementsByClassName . Sin embargo, esto devolvería una matriz. Simplemente use querySelector en su lugar. function firstFunc() { var x = document.querySelector(".butCol"); if (x.style.backgroundColor == "transparent") { x.style.backgroundColor = "#373975"; x.style.color = "white"; } else { x.style.backgroundColor = "transparent"; }; }; <button onClick="firstFunc()"; class="butCol"; style="background-color: transparent; border: none; font-weight: bold; border-radius: 25px; padding: 2px 15px";>LATTES</button> Sin embargo, sería más inteligente usar CSS para aplicar los cambios y simplemente usar .classList.toggle('class-name'); función:
function firstFunc() { document.querySelector('.butCol').classList.toggle('clicked'); } .butCol { background-color: transparent; border: none; border-radius: 25px; padding: 2px 15px; font-weight: bold; } .clicked { background-color: #373975; color: white; } <button onClick="firstFunc()"; class="butCol";>LATTES</button>