Estoy tratando de activar un evento de clic en cada elemento de título html que pasará en el texto interno y lo agregará a un objeto, luego empujaré a una matriz vacía al hacer clic en cada título html.
Tengo 2 escenarios a continuación, ninguno funciona como se esperaba.
HTML
<h2 class="icon-title px-2" aria-label="View details for '{{ block.settings.collection.title | escape }}'"><span>{{ block.settings.collection.title }}</span></h2>JS
const catImgWrapper = document.querySelectorAll('.icon-title'); //run event let runDataLayer = (item) => { event.preventDefault(); console.log("run data layer"); window.colData = window.colData || []; window.colData.push({ "event": "interaction", "data": { "interaction": { "location": "featured categories", "component": "carousel", "description": `${item.innerText}`//pass item name } } }); }; //initiate the function catImgWrapper.forEach(function(item){ item.addEventListener("click", runDataLayer(item)); console.log(item.innerText) }); //Test 2 - not working document.addEventListener('DOMContentLoaded', (event) => { //run the function function tracking(item){ //push data layer console.log('each item in loop', item.innerText); window.colData = window.colData || []; window.colData.push({ "event": "interaction", "data": { "interaction": { "location": "featured categories", "component": "carousel", "description": `${item.innerText}`//pass item name } } }); } var elementList = document.querySelectorAll('.icon-title'); for (var i = 0; i < elementList.length; i++) { // handle click elementList[i].addEventListener(".click", function() { //call the function tracking(elementList) }); } });Cualquier ayuda seria genial
Hay algunos problemas con su código que podrían estar causando problemas.
En primer lugar, a menos que planee cambiar el valor de catImgWrapper , use una declaración const, no let.
Aquí hay un artículo de blog que explica por qué: https://codeburst.io/javascript-var-let-or-const-which-one-should-you-use-2fd521b050fa
Pero los problemas principales son los siguientes: en la función runDataLayer está accediendo a event.preventDefault() pero el objeto de evento nunca se declara, por lo que debe hacerlo primero. Al igual que:
let runDataLayer = (event, item) => { event.preventDefault(); console.log("run data layer"); window.colData = window.colData || []; window.colData.push({ "event": "interaction", "data": { "interaction": { "location": "featured categories", "component": "carousel", "description": `${item.innerText}`//pass item name } } }); };En segundo lugar, cuando intenta agregar el detector de eventos a DOMElement, en realidad está llamando a la función. La forma correcta de declarar la función al pasar el objeto de evento sería así:
item.addEventListener("click", (event) => runDataLayer(event, item));o
item.addEventListener("click",function (event) { runDataLayer(event, item) });¡Con suerte, eso fue útil! Hágamelo saber