為什么我的事件偵聽器不起作用？ 沒有 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