为什么我的事件侦听器不起作用？ 没有 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