为什么我的事件监听器不工作?没有Javascript控制台错误

Question

单击按钮时，我正试图更改类的href。然而，我未能做到这一点。Javascript控制台中没有显示任何错误。

var clicker0 = document.getElementsByClassName("elementor-button elementor-button--checkout elementor-size-md");
for (var i = 0; i < clicker0.length; i++) {
clicker0[i].addEventListener("click", clicker1);
}
function clicker1(esc1112) {
esc1112.preventDefault();
if (sessionStorage.getItem('coupon') === '1') {
clicker0[i].href = 'https://www.test.com/checkout/?coupon_code=yyyy';
} else {
clicker0[i].href = 'https://www.test.com/checkout/?coupon_code=xxxx';
}
}

<a href="https://www.test.com/checkout/" class="elementor-button elementor-button--checkout elementor-size-md">
<span class="elementor-button-text">Checkout</span>
</a>

JS小提琴：https://jsfiddle.net/lindychen/L0d7yv59/

预期结果

单击该按钮时，应将用户重定向到https://www.test.com/checkout/?coupon_code=xxxx因为会话存储暂时是空白的。但是，链接仍然指向原始链接(https://www.test.com/checkout/)

谢谢。

Answer 1

当事件侦听器运行时，i == clicker0.length(假设您没有将全局变量i用于其他任何事情(。因此clicker0[i]将是未定义的。

使用esc1112.currentTarget获取单击的元素。

var clicker0 = document.getElementsByClassName("elementor-button elementor-button--checkout elementor-size-md");
for (var i = 0; i < clicker0.length; i++) {
clicker0[i].addEventListener("click", clicker1);
}
var coupon = '1'; // because sessionStorage doesn't work in Stack Snippets.
function clicker1(esc1112) {
esc1112.preventDefault();
if (coupon === '1') {
esc1112.currentTarget.href = 'https://www.test.com/checkout/?coupon_code=yyyy';
} else {
esc1112.currentTarget.href = 'https://www.test.com/checkout/?coupon_code=xxxx';
}
console.log(document.querySelector(".elementor-button").href);
}

<a href="https://www.test.com/checkout/" class="elementor-button elementor-button--checkout elementor-size-md">
<span class="elementor-button-text">Checkout</span>
</a>

Answer 2

仅更改：

clicker0[i].href = "something"

在两行中对此：

clicker0[0].href ="something";

在你的函数中将i改为0