CODEWITHSUNDEEP
javascript
Gerico
Gerico

Reputation: 5169

Pure JavaScript way to store a var of a link within a list

I can't edit my HTML but I wanted to store a variable of the anchor within a list item so that I can make an onclick event.

At the moment nothing seems to work and I'm assuming it's probably the querySelectorAll being used incorrectly. Help appreciated.

//set the link class on nav items
var link = document.querySelectorAll('.nodiv a');

console.log(link);

link.onclick = function(e) {
	e.preventDefault();
	alert("clicked!");
}
<ul>
	<li class="nodiv"><a href="#">Link</a></li>
	<li class="nodiv"><a href="#">Link</a></li>
	<li class="nodiv"><a href="#">Link</a></li>
	<li class="nodiv"><a href="#">Link</a></li>
</ul>

Upvotes: 0

Views: 45

Answers (2)

Seimen
Seimen

Reputation: 7250

querySelectorAll returns a node list, so you have to loop through the list to get the actual nodes.

//set the link class on nav items
var link = document.querySelectorAll('.nodiv a');

console.log(link);

for (var i = 0; i < link.length; i++) {
    link[i].onclick = function (e) {
        e.preventDefault();
        alert('clicked!');
    }
}
<ul>
	<li class="nodiv"><a href="#">Link</a></li>
	<li class="nodiv"><a href="#">Link</a></li>
	<li class="nodiv"><a href="#">Link</a></li>
	<li class="nodiv"><a href="#">Link</a></li>
</ul>

Upvotes: 2

ByteHamster
ByteHamster

Reputation: 4951

You tried to add the onclick function to an array of elements. You need to set it to one single element like this:

//set the link class on nav items
var link = document.querySelectorAll('.nodiv a');

console.log(link);

for(var i=0;i<link.length;i++) {
    link[i].onclick = function(e) {
	    e.preventDefault();
	    alert("clicked!");
    }
}
<ul>
	<li class="nodiv"><a href="#">Link</a></li>
	<li class="nodiv"><a href="#">Link</a></li>
	<li class="nodiv"><a href="#">Link</a></li>
	<li class="nodiv"><a href="#">Link</a></li>
</ul>

Upvotes: 0

Related Questions