1

estoy haciendo un ejercicio donde tengo que poner "noticia nacional" o "noticia internacional",dependiendo si la noticia es nacional o internacional, el problema es que le aplico un display none al texto de "noticia nacional" o "noticia internacional" correspondiente, pero solo hace efecto en el primer section, ya lo he intentado de varias maneras pero la verdad no se porque no hace efecto

aca una imgaen de la pagina:

introducir la descripción de la imagen aquí

Aca dejo el codigo JavaScript:

let contenedorNoticias= document.querySelector(".general");


for (let i = 0; i < noticias.length; i++) {
    let plantillaNotica= `
        <section class="sec1">
            <div>
                <img src="${noticias[i].imgUrl}">
            </div>

            <div class="tipoNoticia">
                <p>Noticia Internacional</p>
                <p>Noticia Nacional</p>
            </div>
        
            <div>
                <h2>${noticias[i].titulo}</h2>
                <p>${noticias[i].fecha}</p>
                <p>${noticias[i].descripcion}</p>
            </div>
        </section >       
    `
    
    contenedorNoticias.innerHTML += plantillaNotica

    const contenedorNoticia= document.querySelectorAll(".sec1");
    const tipoNoticia = document.querySelector('.tipoNoticia')

    if(noticias[i].tipoNacional == true) {
        contenedorNoticia[i].classList.add('noticiaNacional') 
        tipoNoticia.children[0].style.display = "none"     
        console.log(tipoNoticia.children[0])   
    }
}

1
  • Podría editar la pregunta y colocar el código HTML. el 30 sep. 2021 a las 15:13

1 respuesta 1

0

Puedes utilizar un operador ternario, para mostrar uno u otro:

let plantillaNotica= `
        <section class="sec1 ${noticias[i].tipoNacional?'noticiaNacional':''}">
            <div>
                <img src="${noticias[i].imgUrl}">
            </div>

            <div class="tipoNoticia">
                ${noticias[i].tipoNacional?'<p>Noticia Nacional</p>':'<p>Noticia Internacional</p>'}
                
            </div>
        
            <div>
                <h2>${noticias[i].titulo}</h2>
                <p>${noticias[i].fecha}</p>
                <p>${noticias[i].descripcion}</p>
            </div>
        </section >       
    `;

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.