Necesito ayuda para activar dos funciones con el mismo clic de botón. A partir de ahora, la primera función se activa y cambia los valores del elemento DOM objetivo según sea necesario, pero cuando vuelvo a hacer clic en el mismo botón, no hace nada. Por favor, ayúdame a depurar el código.
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"; } })Intenté todos los trucos posibles según mi comprensión, pero no pude hacerlo funcionar, así que necesito ayuda rápida.
¿Puedes mostrar el html? Tal vez sea un error de referencia. Puede agregar varios oyentes de 'clic', pero en este caso (alternar) creo que es más conveniente usar uno. Cambié la forma en que obtienes/configuras 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"; } })Por favor, intente si la combinación de ambos conjuntos de declaraciones es útil:
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"; } })¿Ha intentado meter ambas condiciones dentro del mismo evento de clic? Como abajo.
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"; } });