Soy nuevo en JavaScript y he estado tratando de cambiar el color de una línea de texto en mi sitio web cuando hago clic en ella con JS. Sé que hay formas de hacerlo solo con CSS, pero me gustaría practicar algo de JS. , esto es lo que he estado intentando hasta ahora:
tengo esta lista:
function white() { const input = document.getElementById("weekly"); input.style.color = "white"; } <ul> <li><a id="weekly" href="/index.html" onclick="white()">Weekly</a></li> </ul>Es una lista más larga, pero no quería que se viera desordenada :)
Quiero cambiar el color de "Semanal" cuando se hace clic en él y esto es lo que he intentado: lo he estado intentando durante un tiempo y esto es lo mejor que se me ocurrió, pero parece que no funciona.
Aunque solo por una fracción de segundo, el texto de la etiqueta de anclaje tiene un estilo que se representa como texto en blanco. Su etiqueta de anclaje lleva al usuario a /index.html y, por lo tanto, el efecto no es visible mientras el usuario esté en la página. Para evitar la redirección, establezca el atributo href en # :
function white() { const input = document.getElementById("weekly"); input.style.color = "white"; } <ul> <li><a id="weekly" href="#" onclick="white()">Weekly</a></li> </ul>Su mismo fragmento de código funciona. El problema que enfrenta es que su etiqueta <a> tiene un enlace, que navega a lo que supongo que es la misma página, por lo tanto, la página se vuelve a cargar y el enlace vuelve a estar negro. Ver sin el href (y un color más visible):
function white() { const input = document.getElementById("weekly"); input.style.color = "green"; } <ul> <li><a id="weekly" onclick="white()">Weekly</a></li> </ul>Su fragmento funciona bien, pero podría hacerlo un poco más genérico para que pueda usarlo de otras maneras, como se muestra a continuación.
// es6 "fat arrow" one liner changeColor = (element, color) => element.style.color = color; // maybe more familiar // function changeColor(element, color) { // element.style.color = color; // } <ul> <li><a id="weekly" href="#" onclick="changeColor(this, 'red')">Weekly</a></li> <li><a id="daily" href="#" onclick="changeColor(this, 'blue')">Daily</a></li> <li><a id="hourly" href="#" onclick="changeColor(this, 'green')">Hourly</a></li> </ul>