How to trigger second javascript function on same button click-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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