Devuelve el contenido interno (innerHTML) de una etiqueta p cuando se hace clic en una etiqueta de botón con clase personalizada mediante JavaScript en Google Tag Manager.

Estoy intentando crear un script personalizado en Google Tag Manager que devuelva el elemento de texto de la clase p cuando se hace clic en un botón específico dentro del div. Pero mi script sigue devolviendo el mismo valor inicial.

En GTM, configuré el disparador del elemento clic basado en la clase “myButton”.
Y para la variable, tengo este código de javascript personalizado.

function () { var x = document.getElementsByClassName("test-here")[0].innerHTML; return x; }

HTML:

<div id="mydivd1" class="test"> <p class="test-here">Quiero devolver este texto 1</p> <button class="mybutton"></button> </div> <div id="mydiv2" class="test"> <p class="test-here">Quiero devolver este texto 2</p> <button class="mybutton"></button> </div>

¿Cómo puedo devolver el elemento de texto p correcto basado en la clase de botón actualmente clicada?

davy.ai

July 17, 2023 at 12:16 pm

Para devolver el elemento de texto p correcto basado en la clase de botón actualmente seleccionada, necesitarás hacer un par de cambios en tu código.

En primer lugar, debes identificar el botón que se ha seleccionado en tu código personalizado de JavaScript. Puedes hacer esto accediendo al objeto de evento pasado como parámetro a la función desencadenada por el evento de clic.

En segundo lugar, debes encontrar el elemento p correspondiente para devolver su texto. Puedes hacer esto comenzando desde el botón seleccionado y navegando hacia arriba en el árbol DOM para encontrar el elemento div padre. Una vez que tengas el elemento div padre, puedes localizar el elemento p utilizando el nombre de clase o cualquier otro atributo identificador.

Aquí tienes una versión actualizada del código que debería funcionar:

function (event) {
  var btn = event.target; // obtén el botón que se ha seleccionado
  var parentDiv = btn.closest(".test"); // encuentra el elemento div padre
  var p = parentDiv.querySelector(".test-here"); // encuentra el elemento p correspondiente
  var text = p.innerText; // obtén el texto del elemento p
  return text;
}

Este código utiliza el método closest() para encontrar el elemento div padre basado en el nombre de clase test. Luego utiliza el método querySelector() para encontrar el elemento p correspondiente basado en el nombre de clase test-here. Finalmente, devuelve el texto interno del elemento p utilizando la propiedad innerText.

Asegúrate de actualizar tu variable en GTM para utilizar este código personalizado de JavaScript actualizado.

Answer

davy.ai

July 17, 2023 at 12:16 pm
Para devolver el elemento de texto p correcto basado en la clase de botón actualmente seleccionada, necesitarás hacer un par de cambios en tu código.

En primer lugar, debes identificar el botón que se ha seleccionado en tu código personalizado de JavaScript. Puedes hacer esto accediendo al objeto de evento pasado como parámetro a la función desencadenada por el evento de clic.

En segundo lugar, debes encontrar el elemento p correspondiente para devolver su texto. Puedes hacer esto comenzando desde el botón seleccionado y navegando hacia arriba en el árbol DOM para encontrar el elemento div padre. Una vez que tengas el elemento div padre, puedes localizar el elemento p utilizando el nombre de clase o cualquier otro atributo identificador.

Aquí tienes una versión actualizada del código que debería funcionar:
```
function (event) {
  var btn = event.target; // obtén el botón que se ha seleccionado
  var parentDiv = btn.closest(".test"); // encuentra el elemento div padre
  var p = parentDiv.querySelector(".test-here"); // encuentra el elemento p correspondiente
  var text = p.innerText; // obtén el texto del elemento p
  return text;
}
```
Este código utiliza el método closest() para encontrar el elemento div padre basado en el nombre de clase test. Luego utiliza el método querySelector() para encontrar el elemento p correspondiente basado en el nombre de clase test-here. Finalmente, devuelve el texto interno del elemento p utilizando la propiedad innerText.

Asegúrate de actualizar tu variable en GTM para utilizar este código personalizado de JavaScript actualizado.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Devuelve el contenido interno (innerHTML) de una etiqueta p cuando se hace clic en una etiqueta de botón con clase personalizada mediante JavaScript en Google Tag Manager.

Answer

davy.ai