用javascript瞄准网页上的多个按钮

Question

这里是Javascript新手。我的经验是在html/css中更甚。

我有多个按钮在我的页面(类是homebuttonlink, homebuttonlink2等)，我需要javascript创建一个变量的URL。我最初的代码只支持一个按钮，但是当我尝试添加"homebutton2"按钮时，它们都不能工作了。在我看来，它应该同时创建一个homebutton和homebutton2变量，监听这两个变量，然后让被点击的那个成为目标。有人愿意帮我吗?

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>

更新:我尝试了David Thomas的代码，但我无法使其工作。最终目标是页面转换和延迟。我已经更新了上面的代码，以反映我的完整代码，并添加了建议的代码。

Answer 1

您可以使用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…而不是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>