Member 14105304 Ответов: 1

Помогите мне снова pls (простой JS) :3

я получил stucked в этот прослушиватель событий :
мне нужно получить доступ и запустить eventListener для 3 кнопок:


<!DOCTYPE html>
<html>
<head>
</head>
<body>
		<button class="list">CLICK</button>
		<button class="list">CLICK</button>
		<button class="list">CLICK</button>

<script>
        var lists = document.querySelectorAll(".list");
	console.log(lists); // [0, 1, 2]

        var pickAnswer = Math.floor(Math.random() *3);
	console.log(pickAnswer); // pick random number between 0-2

lists.addEventListener("click", function{
	// do something with the lists..
	// but it can't exceed the eventListener. WHY?
});

</script>
</body>
</html>


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

ничего особенного. Это кажется самой простой мыслью. я просто кое-что упустил.

1 Ответов

Рейтинг:
2

enhzflep

Вы совершили простую ошибку. Вы собираете 3 элемента в массивоподобную структуру (список узлов). Вы хотите применить прослушиватели событий к каждому из этих списков. Вместо этого вы пытаетесь применить прослушиватель событий к коллекции*, содержащей элементы*. Ой! Массив-как объекты не имеют прослушивателей событий...

Просто прикрепите обработчик к каждому из элементов в списке узлов

lists[0].addEventListener
lists[1].addEventListener
lists[2].addEventListener

Если вместо этого вы используете оператор распространения ES6, вы можете создать массив из списка узлов. Фактический массив имеет преимущество включения метода forEach.

var nodeList = document.querySelectorAll('.list');
var actualArray = [...nodeList];
actualArray.forEach( eachItemFunc };

function eachItemFunc(item, index, wholeCollection)
{
	item.addEventListener('click', onListClicked, false);
}
function onListClicked(evt)
{
	// do something useful here.
}

Member 14105304

я добавил первый сентенс. но это уже другая проблема.
перед загрузкой страницы и до нажатия кнопок функция уже запущена:

<!DOCTYPE html>






ЩЕЛЧОК
ЩЕЛЧОК
ЩЕЛЧОК




var lists = документ.querySelectorAll(".list");
console.log(списки); // [0, 1, 2]

var pickAnswer = Math.floor(Math.random() *3);
console.log(pickAnswer); // ???

списки[0].addEventListener("click", check());
списки[1].addEventListener("click", check());
списки[2].addEventListener("click", check());


функциональная проверка(){
предупреждение("кнопка нажата!");
}




Bryian Tan

вам нужно следовать второму варианту.

<script>
     var nodeList = document.querySelectorAll('.list');
var actualArray = [...nodeList];
//actualArray.forEach( eachItemFunc };

actualArray.forEach(eachItemFunc);

function eachItemFunc(item, index, wholeCollection)
{
	item.addEventListener('click', onListClicked, false);
}
function onListClicked(evt)
{
	alert(1);
}
  
</script>

enhzflep

Ваша ошибка заключается в том, как вы прикрепляете слушателей событий. Что вам нужно сделать, так это указать адрес функции, используемой для обработки события. Вместо этого вы запускаете функцию, а затем присваиваете ее результат атрибуту обработчика событий. Ай!!

Это простая ошибка - просто уберите лишние скобки

lists[2].addEventListener("click", check());


должно быть

lists[2].addEventListener("click", check);

Member 14105304

Это единственный выход? Я ненавижу этот метод для каждого..

Member 14105304

это работает!! :O
но у меня застряли в еще одну проблему.

Я хочу сделать случайное число(что я уже сделал) и передать его через все классы ".list", и если они совпадают, и я нажму на совпадающее: я выиграю.
что-то вроде этого.

но код возвращает элемент, а не числовой номер массива.
и из-за этого я не могу получить доступ к этим кнопкам.

код:

<!DOCTYPE html>




ЩЕЛЧОК
ЩЕЛЧОК
ЩЕЛЧОК

var lists = документ.querySelectorAll(".list");
console.log(списки); // [0, 1, 2]

var pickAnswer = Math.floor(Math.random() *3);
console.log(pickAnswer); // ???

списки[0].addEventListener("click", check);
списки[1].addEventListener("click", check);
списки[2].addEventListener("click", check);


функциональная проверка(){
console.log(это);
}