Question

192

JavaScript: Get parent element values on click event

rated 0 times [ 193] [ 1] / answers: 1 / hits: 17287 / 7 Years ago, tue, december 5, 2017, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jackelyn

Add To Favorites

Follow

Total Points: 303

Total Questions: 103

Total Answers: 102

Location: Turks and Caicos Islands

Member since Sun, Mar 7, 2021

3 Years ago

jackelyn questions

1 NodeJS Sendgrid 401 unauthorized

Thu, Apr 8, 21, 00:00, 3 Years ago

1 Get accessToken in auth0

Sun, Feb 28, 21, 00:00, 3 Years ago

1 How to target a styled component inside another styled component?

Fri, Jan 1, 21, 00:00, 3 Years ago

1 Refresh WooCommerce product page on added to cart

Mon, May 25, 20, 00:00, 4 Years ago

1 How to pass data fetched in _app.js to a component

Thu, Apr 30, 20, 00:00, 4 Years ago

View All

answered 7 Years ago xavier · Accepted Answer

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.