@SvitlanaSuslenkova
Posted
Any ideas to show properly the add-ons when is yearly(not showing as expected) is welcome! - this. it's strange that you did it with prices but not text, you were almost there.
const texts = document.querySelectorAll(text's class);
function switchPrice(checked) { ...
if (checked) { texts.forEach((text)=> {add class or style here} .... }
else { ... texts.forEach((text)=> {display none here}
Marked as helpful
@sksksk2024
Posted
Hello, @SvitlanaSuslenkova !! 👋👋
I think I'm brain freezed, I can't understand this problem. Can you show me the solution. Maybe give me some tips in using alternative variables(I'm not that good at those).
@SvitlanaSuslenkova
Posted
@sksksk2024 oh, I'm sorry, I checked the wrong stage of the form and talked about the plans.
In your HTML create your <p class="texts">2 month free</p>
Here is the function that you already created:
function switchPrice(checked) {
const monthlyPrice = [9, 12, 15];
const prices = document.querySelectorAll(".plan-priced");
const texts = document.querySelectorAll(.texts);
if (checked) {
texts.forEach((text)=>{text.style.display = "block"}
prices[0].innerHTML = $${monthlyPrice[0] * 10}/yr;
prices[1].innerHTML = $${monthlyPrice[1] * 10}/yr;
prices[2].innerHTML = $${monthlyPrice[2] * 10}/yr;
setTime(true)
} else {
texts.forEach((text)=>{text.style.display = "none"}
prices[0].innerHTML = $${monthlyPrice[0]}/mo;
prices[1].innerHTML = $${monthlyPrice[1]}/mo;
prices[2].innerHTML = $${monthlyPrice[2]}/mo;
setTime(false)
} }
Marked as helpful
@SvitlanaSuslenkova
Posted
@sksksk2024 was a question about <p class="price">+$1/mo</p>?
const prices = document.querySelectorAll(".price"); You have to pass time to your function, if(time) {prices[0].innerHTML=} else {...}
Marked as helpful
@sksksk2024
Posted
Thanks a ton, @SvitlanaSuslenkova !!! I've resolved the problem!! 🙌
