如何在同一个按钮点击时触发第二个 javascript function

Question

I need help to trigger two functions on same button click. As of now first function triggers and changes the targeted DOM Element values as required but when I click the same button again then it does nothing. Please help me debug the code.

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";
    }
})

I tried all possible tricks as per my understanding but couldn't make it work, So need a quick help.

Answer 1

Can you show the html? Perhaps its a reference error. You can add multiple 'click' listener but in this case (toggle) I think its more convenient to use one. I changed the way you get/set 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

Please try if combining both the set of statements like so is helpful:

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

Have you tried tucking in both conditions withing the same click event? Like below.

 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"; } });