Add event listener JS

Question

I am new to JS. I am trying to write function on onclick event listener to get the # value and to pass the value to another function. Can you please help me. When user try to click the a tag i want to capture the # value and to pass the href value to the below function for scroll top offset

<ul class="scrolltop scrolltop">
  <li>
    <a href="#Covered">What’s covered</a>
  </li>
  <li>
    <a href="#Collect">Personal Information</a>
  </li>
</ul>

var tabScroll = document.querySelector("#Collect")
window.scrollTo({
  'behavior': 'smooth',
  'left': 0,
  'top': tabScroll.offsetTop - 110
});

Does this answer your question? Smooth scrolling when clicking an anchor link — kmoser
– kmoser, Commented Aug 12, 2020 at 3:27

Adam Manji · Accepted Answer · 2020-08-12 03:29:34Z

1

For event listeners I recommend jquery; it should look something like this.

$(document).on('click', 'a', function() {
    href_val = $(this).attr('href');
    myFunction(href_val);
});

answered Aug 12, 2020 at 3:29

Adam Manji

361 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

shreyasm-dev · Accepted Answer · 2020-08-12 03:34:36Z

1

A solution written in pure Javascript:

document.querySelectorAll('a').forEach(function(element) { // Get all a elements and perform action on them
  element.addEventListener('click', function() {
    // Do something
  })
})

<ul class="scrolltop scrolltop">
  <li>
    <a href="#Covered">What’s covered</a>
  </li>
  <li>
    <a href="#Collect">Personal Information</a>
  </li>
</ul>

answered Aug 12, 2020 at 3:34

shreyasm-dev

2,9025 gold badges23 silver badges43 bronze badges

Comments

Oscar Velandia · Accepted Answer · 2021-10-12 17:32:21Z

1

if you need to get the href value in every , you can do something like:

const tabScroll = document.getElementsByTagName("a")

// Here you add the events:
[...tabScroll].forEach(link => link.addEventListener("click", getLinkValue));

// Here you pass the scroll element to the scrollTo function
function getLinkValue(event){
  const linkElement = event.target;
  const hrefValue = linkElement.href.split("#")[1];  
  const hrefWithHash = `#${hrefValue}`
  
  window.scrollTo({
  'behavior': 'smooth',
  'left': 0,
  'top': linkElement.offsetTop - 110
});

}

<ul class="scrolltop scrolltop">
  <li>
    <a href="#Covered">What’s covered</a>
  </li>
  <li>
    <a href="#Collect">Personal Information</a>
  </li>
</ul>

edited Oct 12, 2021 at 17:32

answered Aug 12, 2020 at 3:36

Oscar Velandia

1,1661 gold badge8 silver badges10 bronze badges

Collectives™ on Stack Overflow

Add event listener JS

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related