Why Javascript file is working only for "about"?

Question

I have: about, calculator, contact and I want to create one function for all of the elements, but during testing, it works only for the first element. Thanks for the help!

let tool = document.querySelector(".tool");

tool.onclick = function(event) {
  console.log(event.target.id);
};

<ul class="tools">
  <li class="tool" id="about"><i class="fas fa-question blue"></i> - about</li>
  <li class="tool" id="contact"><i class="fas fa-phone blue"></i> - contact</li>
  <li class="tool" id="calculator"><i class="fas fa-calculator blue"></i> - calculator</li>
</ul>

score 1 · Accepted Answer · answered May 10 '20 at 18:31

You may use querySelectorAll for selecting all the elements with the provided class name and iterate over them and binding your click handler.

let tools = document.querySelectorAll(".tool");
for (var i = 0; i < tools.length; i++) {
  tools[i].onclick = function(event) {
    console.log(event.target.id);
  }
}

<ul class="tools">
  <li class="tool" id="about"><i class="fas fa-question blue"></i> - about</li>
  <li class="tool" id="contact"><i class="fas fa-phone blue"></i> - contact</li>
  <li class="tool" id="calculator"><i class="fas fa-calculator blue"></i> - calculator</li>
</ul>

Thanks. But then my javascript doesn`t work, I need a cycle? — Horki, May 10 '20 at 19:13

score 0 · Answer 2 · answered May 10 '20 at 18:24

See MDN:

The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors.

and

If you need a list of all elements matching the specified selectors, you should use querySelectorAll() instead.

But see also: What do querySelectorAll and getElementsBy* methods return?

Why Javascript file is working only for "about"?

2 Answers2