使用JavaScript定位网页上的多个按钮

j2cgzkjk 于 2023-04-10 发布在 Java

关注(0)|答案(1)|浏览(143)

新的Javascript在这里。我的经验是更多的html/css。
我的页面上有多个按钮（class是homebuttonlink，homebuttonlink 2，etc）我需要javascript来创建一个带有URL的变量。我原来的代码只使用了一个按钮，但是当我试图添加一个“homebutton 2”时，它们都不再起作用了。在我看来，它应该同时创建一个homebutton和homebutton 2变量，听他们两个，然后让任何一个被点击的目标。有人愿意帮我吗？

window.onload = () => {
    const transition_el = document.querySelector('.transition');
    document.querySelectorAll('.homebuttonlink').forEach(element => {
          element.addEventListener('click', event => {
            event.preventDefault();
            let target = event.currentTarget.href;
            console.log(target);

            transition_el.classList.add('is-active');

            setTimeout(() => {
              window.location.href = target;
            }, 500);

          });
        }

<a class="homebuttonlink" href="page1/#one">BUTTON1</a>
<a class="homebuttonlink" href="page2/#two">BUTTON1</a>

更新：我尝试了大卫托马斯的代码，但我无法使其工作。最终目标是页面过渡和延迟。我已经更新了上面的代码，以反映我的完整代码，并添加了建议的代码。

JavaScript

来源：https://stackoverflow.com/questions/75966157/targeting-multiple-buttons-on-a-webpage-with-javascript

1条答案

按热度按时间

yzuktlbb1#

你可以使用document.querySelectorAll()来遍历所有匹配选择器的元素。例如：

document.querySelectorAll('.homebuttonlink').forEach(element => {
    element.addEventListener('click', event => {
        event.preventDefault();
        let target = event.currentTarget.href;
        console.log(target);
    });
});

<a class="homebuttonlink" href="/home.html#one">Home</a>
<a class="homebuttonlink" href="/home.html#two">A la casa</a>

或者，您可以使用for...of而不是forEach，这取决于您的偏好：

const homebuttons = document.querySelectorAll('.homebuttonlink');

for (const element of homebuttons) {
    element.addEventListener('click', event => {
        event.preventDefault();
        let target = event.currentTarget.href;
        console.log(target);
    });
}

<a class="homebuttonlink" href="/home.html#one">Home</a>
<a class="homebuttonlink" href="/home.html#two">A la casa</a>

赞(0）回复(0）举报 2023-04-10

我来回答

使用JavaScript定位网页上的多个按钮

1条答案

相关问题

热门标签

最新问答