CODEWITHSUNDEEP
javascriptdomdom-events
nfld
nfld

Reputation: 53

JavaScript: Get parent element values on click event

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?

Upvotes: 5

Views: 18385

Answers (2)

Juank
Juank

Reputation: 6196

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.

Upvotes: 9

Beginner
Beginner

Reputation: 9095

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>

Upvotes: 0

Related Questions