10 - Accediendo a un conjunto de marcas HTML similares a partir de un Nodo (getElementsByTagName)



Problema:Confeccionar una página que muestre dos div que contengan 3 párrafos cada uno. Cuando se presione un botón ocultar todos los párrafos del segundo div.
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prueba</title>
</head>

<body>
    <div id="bloque1">
        <h1>Primer Bloque de párrafos.</h1>
        <p>Este es el primer párrafo</p>
        <p>Este es el segundo párrafo</p>
        <p>Este es el tercer párrafo</p>
    </div>
    <div id="bloque2">
        <h1>Segundo Bloque de párrafos.</h1>
        <p>Este es el primer párrafo</p>
        <p>Este es el segundo párrafo</p>
        <p>Este es el tercer párrafo</p>
    </div>
    <input type="button" value="Ocultar" onClick="ocultarParrafos()">
    <script src="funciones.js"></script>
</body>

</html>
function ocultarParrafos() {
    let obj = document.getElementById("bloque2")
    let lista = obj.getElementsByTagName('p')
    for (let elemento of lista)
        elemento.style.display = 'none'
}
Ver solución


Retornar