Question 53902 in Javascript Question posted in
A very good W3school tutorial can be found here.

Event listener to grab a value in a relative element – Javascript

I’m trying to create an event listener to capture the Store Name from the first strong tag when a user clicks the Get Directions link, in order to pass the value to the GTM datalayer.

Is it a good approach to use an if statement on click to check for the directions class, then look for the closet li and then somehow drill down to the first strong tag?

I don’t have the ability to easily alter the HTML as it’s a WordPress plugin.

<li id="7245">
  <div class="store-location">
    <p>
      <strong>Store Name</strong>
      <span>Store Street</span>
      <span>Store Town</span>
      <span>Store Country</span>
    </p>

    <p class="contact-details">
      <span>
        <strong>Email</strong>: <a href="mailto:[email protected]">[email protected]</a>
      </span>
    </p>
  </div>

  <div class="direction-wrap">
    19 mi
    <a class="directions" href="#">Get Directions</a>
  </div>
</li>

I tried creating the event listener but was unable to get the right syntax for the if statement and I don’t have the knowledge of JS to know how to track the click and find the value I need to capture.

Tags:

2

Answers


  1. 0

    You can get the e.target from the event, and use .closest to get the li, and then use .querySelector to get the element you care about:

    Array.from(document.querySelectorAll('.directions')).forEach((direction) => {
    direction.addEventListener('click', (e) => {
        console.log(e.target.closest('li').querySelector('p > strong').innerHTML)
    });
});
    <ul>
  <li id="7245">
    <div class="store-location">
      <p>
        <strong>Store Name</strong>
        <span>Store Street</span>
        <span>Store Town</span>
        <span>Store Country</span>
      </p>

      <p class="contact-details">
        <span
          ><strong>Email</strong>:
          <a href="mailto:[email protected]">[email protected]</a></span
        >
      </p>
    </div>
    <div class="direction-wrap">
      19 mi
      <a class="directions" href="#">Get Directions</a>
    </div>
  </li>
  <li id="7245">
    <div class="store-location">
      <p>
        <strong>Other Store Name</strong>
        <span>Store Street</span>
        <span>Store Town</span>
        <span>Store Country</span>
      </p>

      <p class="contact-details">
        <span
          ><strong>Email</strong>:
          <a href="mailto:[email protected]">[email protected]</a></span
        >
      </p>
    </div>
    <div class="direction-wrap">
      19 mi
      <a class="directions" href="#">Get Directions</a>
    </div>
  </li>
</ul>
    Login or Signup to reply.
  2. 0

    Since the outer <li></li> tag is not corrupted, you could use the ‘innerHTML’ attribute to get the content as a string, then search for the first appearance of <strong> in the string and get the value from there:

    document.querySelector('#7245').innerHTML.split('<strong>')[1]

    should get you the result ‘Store Name’.

    docs: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

    EDIT: i just realized you wanted an event handler to do this, so, borrowing from dave’s excellent approach above, maybe try something like this:

    Array.from(document.querySelectorAll('.directions')).forEach((direction) => {
direction.addEventListener('click', (e) => {
    console.log(e.target.closest('li').innerHTML.split('<strong>')[1])
});});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search