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