如何在单击同一按钮时触发第二个javascript函数

Question

我需要帮助在单击同一按钮时触发两个函数。到目前为止，第一个函数根据需要触发并更改目标DOM元素值，但当我再次单击同一按钮时，它什么也不做。请帮我调试代码。

var btnLabel = document.querySelector("alt").innerHTML;
var currentPrice = document.querySelectorAll(".priceTag pr");
var planUrl = document.querySelectorAll(".roundedbtn");
document.querySelector(".defaultBtn").addEventListener("click", function() {
if(btnLabel === "Annual"){
currentPrice[0].innerHTML = "2020";
currentPrice[1].innerHTML = "2021";
currentPrice[2].innerHTML = "2022";
planUrl[0].href = "/checkout?level=4";
planUrl[1].href = "/checkout?level=5";
planUrl[2].href = "/checkout?level=6";
planUrl[3].href = "/checkout?level=4";
planUrl[4].href = "/checkout?level=5";
planUrl[5].href = "/checkout?level=6";
btnLabel = document.querySelector("alt").innerHTML = "Monthly";
}

})
document.querySelector(".defaultBtn").addEventListener("click", function() {
if(btnLabel === "Monthly"){
currentPrice[0].innerHTML = "49";
currentPrice[1].innerHTML = "99";
currentPrice[2].innerHTML = "169";
planUrl[0].href = "/checkout?level=1";
planUrl[1].href = "/checkout?level=2";
planUrl[2].href = "/checkout?level=3";
planUrl[3].href = "/checkout?level=1";
planUrl[4].href = "/checkout?level=2";
planUrl[5].href = "/checkout?level=3";
btnLabel = document.querySelector("alt").innerHTML = "Annual";
}
})

根据我的理解，我尝试了所有可能的技巧，但都无法奏效，所以需要快速帮助。

Answer 1

你能显示html吗？也许这是一个参考错误。您可以添加多个"点击"侦听器，但在这种情况下(切换(，我认为使用一个更方便。我改变了你获取/设置btnLabel:的方式

var btnLabel = document.querySelector("alt").innerHTML;
var currentPrice = document.querySelectorAll(".priceTag pr");
var planUrl = document.querySelectorAll(".roundedbtn");
document.querySelector(".defaultBtn").addEventListener("click", function() {
btnLabel = document.querySelector("alt").innerHTML;
if(btnLabel === "Annual"){
currentPrice[0].innerHTML = "2020";
currentPrice[1].innerHTML = "2021";
currentPrice[2].innerHTML = "2022";
planUrl[0].href = "/checkout?level=4";
planUrl[1].href = "/checkout?level=5";
planUrl[2].href = "/checkout?level=6";
planUrl[3].href = "/checkout?level=4";
planUrl[4].href = "/checkout?level=5";
planUrl[5].href = "/checkout?level=6";
document.querySelector("alt").innerHTML = "Monthly";
} else if(btnLabel === "Monthly") {
currentPrice[0].innerHTML = "49";
currentPrice[1].innerHTML = "99";
currentPrice[2].innerHTML = "169";
planUrl[0].href = "/checkout?level=1";
planUrl[1].href = "/checkout?level=2";
planUrl[2].href = "/checkout?level=3";
planUrl[3].href = "/checkout?level=1";
planUrl[4].href = "/checkout?level=2";
planUrl[5].href = "/checkout?level=3";
document.querySelector("alt").innerHTML = "Annual";
}

})

Answer 2

您是否尝试在同一点击事件中同时满足这两种条件？如下图所示。

var btnLabel = document.querySelector("alt").innerHTML;
var currentPrice = document.querySelectorAll(".priceTag pr");
var planUrl = document.querySelectorAll(".roundedbtn");
document.querySelector(".defaultBtn").addEventListener("click", function() {
if(btnLabel === "Annual"){
currentPrice[0].innerHTML = "2020";
currentPrice[1].innerHTML = "2021";
currentPrice[2].innerHTML = "2022";
planUrl[0].href = "/checkout?level=4";
planUrl[1].href = "/checkout?level=5";
planUrl[2].href = "/checkout?level=6";
planUrl[3].href = "/checkout?level=4";
planUrl[4].href = "/checkout?level=5";
planUrl[5].href = "/checkout?level=6";
btnLabel = document.querySelector("alt").innerHTML = "Monthly";
}else if(btnLabel === "Monthly"){
currentPrice[0].innerHTML = "49";
currentPrice[1].innerHTML = "99";
currentPrice[2].innerHTML = "169";
planUrl[0].href = "/checkout?level=1";
planUrl[1].href = "/checkout?level=2";
planUrl[2].href = "/checkout?level=3";
planUrl[3].href = "/checkout?level=1";
planUrl[4].href = "/checkout?level=2";
planUrl[5].href = "/checkout?level=3";
btnLabel = document.querySelector("alt").innerHTML = "Annual";
} 
});

Answer 3

请尝试这样组合两组语句是否有帮助：

var btnLabel = document.querySelector("alt").innerHTML;
var currentPrice = document.querySelectorAll(".priceTag pr");
var planUrl = document.querySelectorAll(".roundedbtn");
document.querySelector(".defaultBtn").addEventListener("click", function() {
if (btnLabel === "Annual") {
currentPrice[0].innerHTML = "2020";
currentPrice[1].innerHTML = "2021";
currentPrice[2].innerHTML = "2022";
planUrl[0].href = "/checkout?level=4";
planUrl[1].href = "/checkout?level=5";
planUrl[2].href = "/checkout?level=6";
planUrl[3].href = "/checkout?level=4";
planUrl[4].href = "/checkout?level=5";
planUrl[5].href = "/checkout?level=6";
btnLabel = document.querySelector("alt").innerHTML = "Monthly";
} else if (btnLabel === "Monthly") {
currentPrice[0].innerHTML = "49";
currentPrice[1].innerHTML = "99";
currentPrice[2].innerHTML = "169";
planUrl[0].href = "/checkout?level=1";
planUrl[1].href = "/checkout?level=2";
planUrl[2].href = "/checkout?level=3";
planUrl[3].href = "/checkout?level=1";
planUrl[4].href = "/checkout?level=2";
planUrl[5].href = "/checkout?level=3";
btnLabel = document.querySelector("alt").innerHTML = "Annual";
}
})