Soy muy nuevo en JS y trato de solucionar una limitación en Webflow. Quiero obtener algunos valores de la página web y usarlos como parámetros en un webhook.
La estructura de la página podría verse así:
<body> <div id="job_ID" class="hidden">123job</div> <div id="member_ID" class="hidden">123member</div> <a href="webhook.link" class="button">link</a> </body> Quiero reemplazar webhook.link con algo como https://hook.integromat.com/XXXXX?member=123member&job=123job
He estado leyendo sobre document.getElementById y document.createElement , pero sinceramente estoy muy por encima de mi cabeza. ¿Cómo uso los valores job_ID y member_ID de la página para usarlos en un webhook?
Pregunta extra
Además, ¿hay alguna manera de configurarlo para que al hacer clic en el botón se active el webhook en lugar de visitar la URL del webhook?
HTML
<body> <div id="job_ID" class="hidden">123job</div> <div id="member_ID" class="hidden">123member</div> <a href="webhook.link" class="button">link</a> </body>JAVASCRIPT
window.addEventListener('load',function(){ let button = document.querySelector('.button'); button.addEventListener('click',function(event){ event.preventDefault(); event.target.href = getHref(); }); function getHref(){ let jobID = document.querySelector("#job_ID").innerHTML; let memberID = document.querySelector("#member_ID").innerHTML; return `https://hook.integromat.com/XXXXX?member=${memberID}&job=${jobID}`; }Siempre que desee acceder a un elemento DOM, deberá esperar a que se cargue la ventana o javascript no encontrará los elementos DOM. Entonces, inicie su javascript dentro del evento de carga de la ventana.
El método querySelector del objeto del documento es más eficiente para seleccionar elementos (en mi opinión). Está formateado como:
document.querySelector('tagName'); //this will get an element by tag document.querySelector('p'); document.querySelector('.className'); //Starting the string with a period will select an element by class. document.querySelector('.output'); document.querySelector('#elementID'); //Starting the string with a # will get an element by it's ID attribute document.querySelector('#job_ID');El uso de querySelector solo devolverá el PRIMER elemento que encuentre que coincida con su selector (lo que está dentro del paréntesis). Si necesita seleccionar más de un elemento, use querySelectorAll
document.querySelectorAll('.hidden'); //will get all elements with class=hiddenEn la función button.addEventListener anterior, verá el comando
event.preventDefault();Esto evita que se produzca la acción predeterminada de un evento, como una etiqueta de anclaje que redirija a otra página. En su lugar, colocará el código para lo que quiera que haga su botón justo después de la instrucción preventDefault.
¡Buena suerte con tu proyecto!