JavaScript: Get parent element values on click event

Question

I'm completely new to JavaScript and struggling to get this working. I'm trying to display contact details in an alert box when a button is clicked.

The information is displayed in nested DIVs outlined below:

<div class="info-and-actions">
<div class="info">
  <div class="name-container">
    <h4 class="name"><a href="#" title="Name" class="name-link">Trader 1</a></h4>
  </div>
<div class="details-container">
  <p class="tele">###############</p>
  <p class="email">[email protected]</p>
</div>
  <div class="actions">
    <button class="displayContactDetails">Display contact details</button>
  </div>
</div>
</div>

<div class="info-and-actions">
<div class="info">
  <div class="name-container">
    <h4 class="name"><a href="#" title="Name" class="name-link">Trader 2</a></h4>
  </div>
<div class="details-container">
  <p class="tele">###############</p>
  <p class="email">[email protected]</p>
</div>
  <div class="actions">
    <button class="displayContactDetails">Display contact details</button>
  </div>

I am using this JavaScript with an event listener on the displayContactDetails button to display the contact details in the alert box.

function displayContactDetails() {
var contactName = document.querySelector("a.name-link.profile-link").textContent;
var contactTele = document.querySelector("p.tele").textContent;
alert("Contact " + contactName + " on " + contactTele);
}

This currently displays the first trader's contact details when any displayContactDetails button is clicked.

What I want to do is select the relevant contact information from the parent elements of the button (.name-container and .details-container) - so when the second button is clicked, Trader 2's details are displayed.

How do I traverse the DOM to achieve this?

Juank · Accepted Answer · 2017-12-05 14:21:54Z

Your event will have the necessary info to locate the corresponding telephone element.

function displayContactDetails(e) {
    var contactName = e. currentTarget  // this is the element that has the click listener
        .parentNode  // this would be .actions div
        .parentNode  // this would be .info div
        .querySelector('.name a')  // the link with the name
        .innerHTML; // the inner contents of the link, in this case the name

    // repeat but change querySelector to grab the telephone

    alert("Contact " + contactName + " on " + contactTele);
}

or easier with jquery

$('.displayContactDetails').on('click', function(e){
    var name = $(this)
              .closest('.info') // goes up in the tree until .info
              .find('.name').html(); // then back to .name and get content

    alert(name);
});

With jquery it is not only easier, but it is also more resilient to changes in the html structure. Jquery will go up the DOM tree until it finds the .info div. With plain js you have to hardcode the number of times to jump to the parent element, or make a loop for it.

You can also try the other answers suggested but you also have to maintain the additional id's and markup required for it to work.

Beginner · Accepted Answer · 2017-12-05 13:42:02Z

i hope passing a unique info on the function call

          function displayContactDetails(id){
            var contactName = document.getElementById("name-link-"+id).textContent;
        
            alert("Contact " + contactName );
          }

    <div class="info-and-actions">
    <div class="info">
      <div class="name-container">
        <h4 class="name"><a href="#" title="Name" id="name-link-one">Trader 1</a></h4>
      </div>
    <div class="details-container">
      <p class="tele">###############</p>
      <p class="email">[email protected]</p>
    </div>
      <div class="actions">
        <button class="displayContactDetails" onclick="displayContactDetails('one')">Display contact details</button>
      </div>
    </div>
    </div>
    
    <div class="info-and-actions">
    <div class="info">
      <div class="name-container">
        <h4 class="name"><a href="#" title="Name" id="name-link-two">Trader 2</a></h4>
      </div>
    <div class="details-container">
      <p class="tele">###############</p>
      <p class="email">[email protected]</p>
    </div>
      <div class="actions">
        <button class="displayContactDetails" onclick="displayContactDetails('two')">Display contact details</button>
      </div>

Collectives™ on Stack Overflow

JavaScript: Get parent element values on click event

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related