Появление и исчезновение блока, имеющего класс — Нативный JS и DOM?

Question

[kally]

Добрый день. Почему с getElementsById работало, а с поиском класса не работает?
Вот код:

function Aaa(){
// блок исчезновения
      var links = document.getElementsByClassName('item');
      links.style.display = 'none';	  
}

function Bbb(){
// блок появления
      var links = document.getElementsByClassName('item');
	    links.style.display = '';
}

            // После загрузки документа
    window.onload = function(){	 
	
        document.getElementsByClassName('aaa').onclick = function(){
		    alert("блок исчезнет");
		    Aaa();			
        }	
		
        document.getElementsByClassName('bbb').onclick = function(){
		    alert("блок появится");
		    Bbb();				   
        }  
	}

И еще проблема -- даже когда работало (блок исчезал/появлялся, алерт выскакивало)
даже тогда внизу страницы была надпись кода js из файла file.js
Почему так? Я его уже и в head ставила, и под закрывающим body

Answer 1

[Сергей delphinpro]

а вы посмотрите в документации что возвращает getElementById и что getElementsByClassName

Даю подсказку — getElementsByClassName

Comments

[kally]

Спасибо, исправила. Но в коде у меня с этим правильно, и все равно не работает. :((

[Сергей delphinpro]

kally, Вы не поняли.
getElementsByClassName возвращает не один элемент, а коллекцию (HTMLCollection). Если упростить, то вы пытаетесь сделать примерно так

var items = [];// массив!
items.onclick = function(){

проще говоря, по результату вызова getElementsByClassName('aaa') нужно пробежаться циклом и на каждый элемент навесить слушателя события.

[kally]

Слушателя события, это внутри html Кода? Сейчас попробую.

[kally]

И знаете, я попыталась сделать как в ответе ниж по ссылке.
Почему то с [0] все равно не работает, и даже алерт при клике не выводит. А на том примере все ок. Может я подключаю не так?
Вот мой index.php

<?php
    require "js1/t4.html";
?>

То есть файл t4.html находится в той же папке js1 , что и файл со скриптами.
Далее html файл обращается к скриптам через код
<script src="js1/t41.js"></script>

[Сергей delphinpro]

kally, вы в консоль-то заглядывали? там ошибка =) файл не найден.

Если скрипт в одной папке с html, то
<script src="t41.js"></script>

[kally]

Сейчас проверила, так не работает. Дело в том, что html файл сперва вставляется в корневой index.php
Я там поместила функцию с alert("Сработало");
И она срабатывает при загрузке. То есть вставка
<script src="js1/t41.js"></script>
в голове документа правильна.
Но после того, как срабатывает функция
window.onload = function()
остальное не хочет даже алерт показывать при клике. Не пойму. где у меня ошибка.(

Весь код выглядит сейчас так:

window.onload = function() 
{ 
alert("сработало");
var d = document.createElement('div'); 
d.className='aaa'; 
document.body.appendChild(d);
d.innerHTML = "Документ в блоке отлично отображается"; 
 
} 


// это вверху то, что сработало. А ниже печаль


var aaa = document.getElementsByClassName('aaa');
aaa[0].onclick = function() {
    alert("блок исчезнет");
	var item = document.getElementsByClassName('item');
  item[0].style.display = 'none';

}

var bbb = document.getElementsByClassName('bbb');

bbb[0].onclick = function() {
	var item = document.getElementsByClassName('item');
  item[0].style.display = 'block';
  		    alert("блок появится");
}

[Bhudh]

Рановато window.onload закрыли. Весь код в эту функцию заверните. Или поместите необёрнутый сейчас код после того, как в HTML прописаны элементы .aaa, .bbb и .item. Обычно код, работающий с DOM, размещают прямо перед закрывающим </body>.

Answer 2

[Stimulate]

https://jsfiddle.net/du2ntonp/14/

Comments

[kally]

Ой, чего-то не выходит. Я этот код скопировала, строчку alert("блок"); поставила, но даже алерт не выскакивает.