Ways to retrieve the inner text of a sibling element

Question

Ways to retrieve the inner text of a sibling element

Within GTM, I am attempting to retrieve the inner text of a sibling element when the clicked element is triggered.

<div class="repair-item-n ">
  <div class="repair-slide--54894d33-6c88-488f-95d7-3ec9b6a3ade4">
    <div class="restoration_wrap text-center">
      <img class="restoration-image">
    </div>
    <p class="title">Bags</p>
  </div>
</div>

For instance, upon clicking on the "restoration-image" class, I want to retrieve the value "Bags".

Since there are multiple instances of this HTML structure on the page with variations like "Shoes", "Hats", etc., I aim to identify and return the respective text of the "title" class upon each click event.

javascript google-tag-manager

Answer 1

Answer №1

Here's a suggestion for you:

let imageList = document.querySelectorAll('.restoration-image');

imageList.forEach(function (img) {
    img.addEventListener('click', function (event) {
        let parent = this.parentNode;
        let nextSib = parent.nextElementSibling;

        alert(nextSib.innerText);
    });
});

Answer 2

Here's a suggestion for you:

let imageList = document.querySelectorAll('.restoration-image');

imageList.forEach(function (img) {
    img.addEventListener('click', function (event) {
        let parent = this.parentNode;
        let nextSib = parent.nextElementSibling;

        alert(nextSib.innerText);
    });
});

Answer 3

Answer №2

Here is a solution tailored for GTM custom JavaScript variables.

function retrieveAlternateText() {
  if({{event}} === 'gtm.click') {
    var img = {{Click Element}};
    var parentElement = img.parentNode,
        nextEl = parentElement.nextElementSibling;
    return nextEl.innerText;
  }
}

Answer 4

Here is a solution tailored for GTM custom JavaScript variables.

function retrieveAlternateText() {
  if({{event}} === 'gtm.click') {
    var img = {{Click Element}};
    var parentElement = img.parentNode,
        nextEl = parentElement.nextElementSibling;
    return nextEl.innerText;
  }
}

Answer 5

Answer №3

To accomplish this task, I suggest utilizing a Custom JavaScript Variable:

Click - Retrieve Repair Item Title

function() {
  var clickedElement = {{Click Element}};
  if (!clickedElement) return;

  // Locate the common parent element
  var repairItemElement = clickedElement.closest(".repair-item-n");
  if (!repairItemElement) return;

  var titleElement = repairItemElement.querySelector(".title");
  if (!titleElement) return;

  return titleElement.innerText;
}}

Answer 6

To accomplish this task, I suggest utilizing a Custom JavaScript Variable:

Click - Retrieve Repair Item Title

function() {
  var clickedElement = {{Click Element}};
  if (!clickedElement) return;

  // Locate the common parent element
  var repairItemElement = clickedElement.closest(".repair-item-n");
  if (!repairItemElement) return;

  var titleElement = repairItemElement.querySelector(".title");
  if (!titleElement) return;

  return titleElement.innerText;
}}

Ways to retrieve the inner text of a sibling element

Answer №1

Answer №2

Answer №3

`Click - Retrieve Repair Item Title`

Similar questions

How can I extract the JSON value as a string?

I'm stuck on finding the solution for PROJECT EULER P4

What is the best way to fetch the most recent article from every category using mongodb?

What can be done to prevent unnecessary API calls during re-rendering in a React application?

Unable to target the first child of a specific class within the <select> element using CSS

Is there a way to remove all JavaScript files without touching the ones in the node_module folder?

Interactions between a service and a directive: interdependence or triggering of events

Tips for retaining spaces in a multiline string when setting a helm value using cdktf

Executing prototype functions after a function has been defined

Efficiently transferring property values

Hide the scrollbars on the sidebar

Firebase: User interaction resulted in the closing of the popup before the completion of the operation. (auth/popup-closed-by-user)

I started off using Node.js with MongoDB, but now I want to switch to MySQL with Sequelize and implement async/await functions. However, I've run into a problem. Can

`How to pass parameters to a function in Node.js`

Aligning a DIV using javascript

What is the best way to perform calculations within a PHP loop for <input> elements and then display the results using a JavaScript loop?

Getting the expanded row columns values in a RadGrid when using the onHierarchyExpanded event

The stubborn Node and Passport are refusing to update the password using user.setPassword

Generate a dynamic form that automatically populates different input fields based on JSON data

The persistent problem with constantly polling the $.ajax request