Выборка элементов querySelectorAll

[Nlk]

Ребят, всем привет!
Пожалуйста укажите на ошибку в коде.
Почему при клике на выбранных элементах они не пропадают?

<h1 class="oli">вариант 1</h1>
<p class="sd">вариант 2</p>
<p class="oli">вариант 3</p>

var x = document.querySelectorAll('.oli');
document.x.addEventListener("click", myFunction);

function myFunction() {
	var i;
	for (i = 0; i < x.length; i++) {
		x[i].style.display = "none";
	}
}

[рони]

Nlk,
что такое

document.x

???
и на всякий случай у querySelectorAll нет метода addEventListener, нужен цикл по всем элементам для addEventListener

[Nexus]

"x" - коллекция элементов, по сути массив.
У массива нет метода "addEventListener", а у "document" не появилось свойство "x" от того, что вы создали переменную.
Чтобы повесить обработчик на каждый элемент коллекции, нужно пробежаться по коллекции в цикле.
В обработчике события "this" - ссылка на элемент, на котором произошло событие.

var x = document.querySelectorAll('.oli');
for(var i=0;i<x.length;i++)
    x[i].addEventListener("click", myFunction);

function myFunction() {
    this.style.display = "none";
}

[Nlk]

Всем огромное спасибо, особенно за столь подробные разъяснения.

[Nlk]

А скобочки для цикла for можно и не ставить?

[Nexus]

Nlk, лучше ставить.
Если в блоке только 1 операция, то скобки можно опустить.

[Nlk]

Nexus,
Спасибо.
Простите за мою навязчивость, в цикле for переменную i вы внесли в цикл, а в каких случаях могло быть полезно объявлять переменную вне цикла?

[Nexus]

Nlk, не знаю
Область видимости-то не поменяется от того, что переменная будет объявлена до объявления аргументов цикла.
Если циклов несколько и все юзают одну переменную, то её можно определить до создания цикла или в аргументах первого цикла, а в остальных циклах просто изменять её значение.
Т.е. так:

for(var i=0;i<10;i++){};
for(i=0;i<10;i++){};

[Nlk]

Nexus,
Спасибо за ваши ответы, последний раз попрошу вашего внимания.
Скажите а можно реализовать выключение всех потомков схожим образом:

var x = document.querySelectorAll('.oli');
for(var i=0;i<x.length;i++)
    x[i].addEventListener("click", myFunction);

function myFunction() {
    this.childNodes.style.display = "none";
}

[рони]

выключение всех потомков

либо цикл по всем элементам, либо смена класса у родителя