Así que quiero codificar un Vanilla Script que cambie el estilo de un texto individualmente. Aquí está el código de la misma:
<body> <p class="black_to_red" onclick="get_red()">If I click this, I am red</p> <p class="black_to_red" onclick="get_red()">If I click this, I am red</p> <script> function get_red() { text = document.getElementsByClassName("black_to_red"); for (let i = 0; i < text.length; i++) { text[i].style.color = 'red'; } } </script> </body>Pero este código solo funciona un poco. La razón por la que digo "un poco" es porque cuando hago clic en un texto cambia el estilo de ambos textos. ¿Hay alguna manera de hacer que solo afecte el texto específico en el que hago clic?
Hay varias maneras de hacer eso.
Si se apega a los atributos onclick , entonces pase this como argumento, para que la función sepa qué elemento obtuvo el evento click.
function get_red(elem) { elem.style.color = 'red'; } <p class="black_to_red" onclick="get_red(this)">If I click this, I am red</p> <p class="black_to_red" onclick="get_red(this)">If I click this, I am red</p> La mejor práctica es vincular el controlador de eventos de clic mediante código y no utilizar atributos onclick . En ese caso, this se referirá al elemento que obtuvo el evento de clic:
function get_red() { this.style.color = 'red'; } document.querySelectorAll(".black_to_red").forEach(function (elem) { elem.addEventListener("click", get_red); }); <p class="black_to_red">If I click this, I am red</p> <p class="black_to_red">If I click this, I am red</p>Pasar el elemento DOM actual tiene un parámetro hará lo que quieras.
Cambia tu HTML a
<p class="black_to_red" onclick="get_red(this)">If I click this, I am red</p>Y la función a
function get_red(element) { element.style.color = 'red'; }Obs: siempre es preferible usar oyentes en lugar de onclick