I'm pletely 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?

I'm pletely 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?

• javascript
• dom
• dom-events

Share Improve this question Follow edited Mar 19, 2021 at 11:28 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Dec 5, 2017 at 13:01 nfldnfld 5311 gold badge11 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

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.

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>