Member 13616607 Ответов: 1

Короткий скрипт в документе HTML5 не работает

Сценарий не работает. Я хочу сделать "tiposDeFrutas" видимым с атрибутом отображения, когда я нажимаю на "nombreDeLista". Я также добавляю документ CSS. ............................................................................................................................................................................

<pre lang="HTML"><!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>
____________________

.tiposDeFrutas {
display: none;
}


Что я уже пробовал:

................................................................................................................................................................................

1 Ответов

Рейтинг:
1

A_Griffin

1. Используйте window.onload

2. getElementsByClassName возвращает массив, поэтому вам нужно пройти через него, чтобы получить элементы

так... 

window.onload = function () {
      document.getElementById("nombreDeLista").onclick = function () {
         var arr = document.getElementsByClassName("tiposDeFrutas");
         for (var i = 0; i < arr.length; i++) {
            arr[i].style.display = 'block';
         }
      }
   }

Karthik_Mahalingam

5