从 DOM 获取变量值并将它们用作 webhook 中的参数

Question

我是 JS 的新手，正在尝试解决 Webflow 中的一个限制。我想从网页中获取一些值，并将它们用作 webhook 中的参数。

页面结构可能如下所示：

<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>

我想用 https://hook.integromat.com/XXXXX?member=123member&job=123job

之类的东西替换 webhook.link

我一直在阅读有关 document.getElementById 和 document.createElement 的内容，但老实说，我有点不知所措。如何使用页面中的 job_ID 和 member_ID 值在 webhook 中使用？

加分题

此外，有没有办法设置它以便单击按钮触发 webhook 而不是访问 webhook URL？

Answer 1

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}`;
}

每当您想访问 DOM 元素时，您都需要等待 window 加载，否则 javascript 将找不到 DOM 元素。因此，在 window 加载事件中启动 javascript。

文档对象的 querySelector 方法在 selecting 元素时更有效（在我看来）。它的格式为：

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');

使用 querySelector 只会 return 它找到的与您的 selector （括号内的内容）匹配的第一个元素。如果需要 select 多个元素，请使用 querySelectorAll

document.querySelectorAll('.hidden'); //will get all elements with class=hidden

在上面的 button.addEventListener 函数中，您会看到命令

event.preventDefault();

这可以防止事件的默认操作发生，例如锚标记重定向到另一个页面。相反，您将在 preventDefault 语句之后放置您希望按钮执行的任何操作的代码。

祝你项目顺利！

从 DOM 获取变量值并将它们用作 webhook 中的参数

Get variable values from the DOM and use them as parameters in a webhook

javascript

jquery

webhooks

webflow