2

tengo un problema. Tengo el siguiente código html

<!DOCTYPE html>
<html lang="es">
    <head>
        <title>Aprendiendo javascript</title>
        <meta charset="UTF-8">
        <script src="./main.js"></script>
        <style>
            .enorme {
                font-size: 44px;
            }
        </style>
    </head>

    <body>
        <p id="parrafo" class="bonitoParrafo">Hola qué tal!!!</p>
        <p id="parrafo2" class="bonitoParrafo">Hola qué tal!!!</p>
        <p id="parrafo3" class="feitoParrafo">Hola soy un feito parrafo!!!</p>
    </body>
</html>

Y el siguiente script de JavaScript:

window.addEventListener('load', function() {
    console.log("La página ha cargado");
    
    // let parrafo = this.document.getElementsByTagName('p')[0];
    let parrafos = this.document.getElementsByClassName('bonitoParrafo');

    for (const parrafo of parrafos) {
        parrafo.style.color = "red";
        parrafo.innerHTML = "Esto es un texto <strong>bonito</strong>";
        parrafo.classList.add('enorme');
        parrafo.classList.remove('bonitoParrafo');
    }
})

El problema es que cuando se ejecuta pone los estilos y el texto del innerHTML en el primer párrafo, así como añadir la clase enorme, pero en el segundo párrafo no hace nada. El resultado:

introducir la descripción de la imagen aquí

Por qué hace este comportamiento. La segunda iteración del bucle for no la hace.

Muchas gracias.

1 respuesta 1

3

Pues porque en la primera iteración, encuentra al elemento con la clase bonitoParrafo en tu HTML y a ese elemento le agregas la clase enorme, pero como luego lo estás eliminando, en la segunda iteración no lo va a encontrar, por lo tanto en ese segundo ciclo no va a saber a qué elemento con la clase bonitoParrafo le va a agregar la clase enorme:

let parrafos = this.document.getElementsByClassName('bonitoParrafo');

for (const parrafo of parrafos) {
  parrafo.style.color = "red";
  parrafo.innerHTML = "Esto es un texto <strong>bonito</strong>";
  parrafo.classList.add('enorme');
  parrafo.classList.remove('bonitoParrafo'); // aquí lo eliminas.
}

Solo debes comentar esa línea, ejemplo:

window.addEventListener('load', function() {
  console.log("La página ha cargado");

  // let parrafo = this.document.getElementsByTagName('p')[0];
  let parrafos = this.document.getElementsByClassName('bonitoParrafo');

  for (const parrafo of parrafos) {
    parrafo.style.color = "red";
    parrafo.innerHTML = "Esto es un texto <strong>bonito</strong>";
    parrafo.classList.add('enorme');
    // parrafo.classList.remove('bonitoParrafo');
  }
})
.enorme {
  font-size: 44px;
}
<p id="parrafo" class="bonitoParrafo">Hola qué tal!!!</p>
<p id="parrafo2" class="bonitoParrafo">Hola qué tal!!!</p>
<p id="parrafo3" class="feitoParrafo">Hola soy un feito parrafo!!!</p>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.