Help me again pls (simple JS) :3

Question

0.00/5 (No votes)

See more:

i have got stucked in this event listener:
i need to get access and run a eventListener for the 3 buttons:

<!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>

What I have tried:

nothing kinda. It seems the simpliest think. im just missing something.

Posted 2-Jan-19 15:26pm

Member 14105304

Updated 2-Jan-19 16:02pm

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

enhzflep · Answer 1 · 2019-01-02T16:00:00

Solution 1

You've made a simple mistake. You collect 3 elements into an array-like structure (A NodeList). You'd like to apply event listeners to each of these lists. What you instead try to do is apply an event listener to the *collection that contains the elements*. Oops! Array-like objects don't have event listeners...

Just attach the handler to each of the elements in the node-list

JavaScript

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

If instead, you use the ES6 spread operator, you can make an array from the node-list. An actual array has the benefit of including the forEach method.

JavaScript

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.
}

Posted 2-Jan-19 16:00pm

enhzflep

Comments

Member 14105304 2-Jan-19 22:10pm

i have added the first sentense. but these's another problem.
before the page is being loaded and before the buttons clicked, the function is already running:

<!DOCTYPE html>

CLICK
CLICK
CLICK

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

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

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

function check(){
alert("the button is CLICKED!");
}

Bryian Tan 3-Jan-19 0:51am

you need to follow the second option.

<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 3-Jan-19 20:56pm

Your mistake lies in the way you attach the event listeners. What you need to do, is supply the address of the function used to handle the event. What you instead do, is run the function then assign the result of it to the event handler attribute. OUCH!!

It's a simple mistake - just remove the extra brackets

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

should be

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

Member 14105304 3-Jan-19 2:17am

Is it the only way? I hate the for each method..

Member 14105304 4-Jan-19 3:35am

that's working!! :O
but i have stucked in another problem.

I want to make an random number(which i already did) and pass it through all the ".list" classes, and if they match, and ill click on the matched one: ill win.
kind of like that.

but the code returns the element, not an numeric number of the array.
and cuz of that i can't access these buttons.

the code:

<!DOCTYPE html>

CLICK
CLICK
CLICK

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

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

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

function check(){
console.log(this);
}