CODEWITHSUNDEEP
javascriptonclick
siaeva
siaeva

Reputation: 164

Add onclick targeted by class

Rather than adding onClick to each and every link as below, is there a cleaner way to target all links (.tabs a) by adding a short script above or below, and how would this be coded? Thanks in advance for all help :)

<ul class="tabs">
    <li><a href="#all" onClick="window.scrollTo(0, 0);">All</a></li>
    <li><a href="#category-1" onClick="window.scrollTo(0, 0);">Category 1</a></li>
    <li><a href="#category-2" onClick="window.scrollTo(0, 0);">Category 2</a></li>
</ul>

Upvotes: 0

Views: 1935

Answers (4)

Unmitigated
Unmitigated

Reputation: 89394

You can use document.querySelectorAll to obtain all of the elements matching a selector and add event listeners to all of them.

document.querySelectorAll('ul.tabs > li > a').forEach(a => a.addEventListener("click", e=>{
  window.scrollTo(0, 0);
}));
ul.tabs {
  margin-top: 1000px;
}
<ul class="tabs">
    <li><a href="#all">All</a></li>
    <li><a href="#category-1">Category 1</a></li>
    <li><a href="#category-2">Category 2</a></li>
    <li><span>Clicking me has no effect</span></li>
</ul>

Alternatively, you can use event delegation by only adding a single event listener to the parent <ul> and checking the event's target to determine if it was an anchor tag.

document.querySelector('ul.tabs').addEventListener("click", e=>{
  if(e.target.matches("li > a")){
    window.scrollTo(0, 0);
  }
});
ul.tabs {
  margin-top: 1000px;
}
<ul class="tabs">
    <li><a href="#all">All</a></li>
    <li><a href="#category-1">Category 1</a></li>
    <li><a href="#category-2">Category 2</a></li>
    <li><span>Clicking me has no effect</span></li>
</ul>

Upvotes: 4

Rander Gabriel
Rander Gabriel

Reputation: 647

You can get the element with the class via querySelector and then iterate over the children

    function onClick() {
        window.scrollTo(0, 0);
    }
    var element = document.querySelector(".tabs");
    element.childNodes.forEach(function(node) {
        node.addEventListener("click", onClick);
    });

Upvotes: 1

tarkh
tarkh

Reputation: 2549

// Class selector
const elements = document.getElementsByClassName("clickMe");

// Function
const fn = () => console.log('click');

// Loop
for(let i = 0; i < elements.length; i++) {
  elements[i].addEventListener('click', fn, false);
}
<ul class="tabs">
    <li><a data-myattribute="link1" href="#all" class="clickMe">All</a></li>
    <li><a data-myattribute="link2" href="#category-1" class="clickMe">Category 1</a></li>
    <li><a data-myattribute="link3" href="#category-2" class="clickMe">Category 2</a></li>
</ul>

Upvotes: 0

Namysh
Namysh

Reputation: 4647

You can do something like this :

<ul class="tabs">
    <li><a href="#all">All</a></li>
    <li><a href="#category-1">Category 1</a></li>
    <li><a href="#category-2"">Category 2</a></li>
</ul>
<script>
 [...document.querySelectorAll('.tabs > li > a')].forEach(element => {
   element.addEventListener('click', () => {
     // window.scrollTo(0, 0)
     alert('Hello')
   });
 });
</script>

You get all the elements with document.querySelectorAll('.tabs > li > a') and then for each elements you add an click event listener.

Upvotes: 0

Related Questions