Short script in HTML5 document doesn't work

Question

Script doesn't work. I want to make "tiposDeFrutas" visible with display attribute when I click over "nombreDeLista". I also add the CSS document.

.tiposDeFrutas {
  display: none;
}

<!DOCTYPE html>
<html>

<head>
  <title>Pruebas HTML</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel=StyleSheet href="newcss.css" type="text/css" media=screen>
  <script>
    document.onload = function() {
      document.getElementById("nombreDeLista").onclick = function() {
        document.getElementsByClassName("tiposDeFrutas").style.display = "block";
      };
    };
  </script>
</head>

<body>
  <div id="nombreDeLista">Frutas</div>
  <div class="tiposDeFrutas">Pera</div>
  <div class="tiposDeFrutas">Limón</div>
</body>

</html>

You probably want `window.onload` instead of `document.onload` — j08691, Jan 10 '18 at 18:27
Possible duplicate of [javascript - changing a class' style](https://stackoverflow.com/questions/9436123/javascript-changing-a-class-style) — devlin carnate, Jan 10 '18 at 18:28

Zakaria Acharki · Accepted Answer · 2018-01-10T18:48:11.043

document.getElementsByClassName("tiposDeFrutas") will return an array of objects, you could target the first using [0] :

document.getElementsByClassName("tiposDeFrutas")[0].style.display = "block";

If you want to show all the elements you could loop through them using for loop.

document.getElementById("nombreDeLista").addEventListener('click', showAll, false);

function showAll() {
  var tiposDeFrutas = document.getElementsByClassName("tiposDeFrutas");
  
  for (var i = 0; i < tiposDeFrutas.length; i++) {
    tiposDeFrutas[i].style.display = "block";
  }
}

.tiposDeFrutas {
  display: none;
}

<div id="nombreDeLista">Frutas</div>
<div class="tiposDeFrutas">Pera</div>
<div class="tiposDeFrutas">Limón</div>

score 0 · Answer 2 · answered Jan 11 '18 at 19:33

Final code

<!DOCTYPE html>
    <html>
        <head>
            <title>Pruebas HTML</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel=StyleSheet href="newcss.css" type="text/css" media=screen>
            <script>
                window.onload = function () {
                    document.getElementById("nombreDeLista").onclick = function () {
                        elementos = document.getElementsByClassName("tiposDeFrutas");
                        for (var i = 0; i < elementos.length; i++) {
                            elementos[i].style.display = "block";
                        }
                    };
                };
            </script>
        </head>
        <body>
            <div id="nombreDeLista">Frutas</div>
            <div class="tiposDeFrutas">Pera</div>
            <div class="tiposDeFrutas">Limón</div>
        </body>
    </html>

Short script in HTML5 document doesn't work

2 Answers2