How to trigger second javascript function on same button click

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.

Have you tried this: document.querySelector(".defaultBtn").addEventListener("click", function() { if (btnLabel === "Annual") {...} else if (btnLabel === "Monthly") {...} }); — jsN00b
– jsN00b, Commented Mar 26, 2022 at 10:49
What are you trying to find with document.querySelector("alt")? — Carsten Massmann
– Carsten Massmann, Commented Mar 26, 2022 at 11:22

HRD · Accepted Answer · 2022-03-26 11:27:09Z

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

rmRueter · Accepted Answer · 2022-03-26 10:55:50Z

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

jsN00b · Accepted Answer · 2022-03-26 10:51:28Z

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

Collectives™ on Stack Overflow

How to trigger second javascript function on same button click

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related