Monthly / Yearly pricing slider not refreshing on yearly selection-CodePudding

I have 2 days experience with HTML, CSS and JS on front-end development.

After reading lots I have been able to do the following. The thing is that it is refreshing when selecting the Monthly, but not on the Yearly, which is the one selected from the beginning.

This is the code I have been working on:

const switchMonthly = document.getElementById('switchMonthly');
const switchYearly = document.getElementById('switchYearly');
const flexy = document.getElementById('flexy');

switchMonthly.addEventListener('change', e => {
  flexy.classList.toggle('show-annually');
  flexy.classList.toggle('show-monthly');
})
switchYearly.addEventListener('change', e => {
  flexy.classList.toggle('show-monthly');
  flexy.classList.toggle('show-annually');
})

.show-monthly .price-box .monthly {
  display: none;
}

.show-monthly .price-box .annually {
  display: block;
}

.show-annually .price-box .monthly {
  display: block;
}

.show-annually .price-box .annually {
  display: none;
}

<input type="radio" id="switchMonthly" name="switchPlan" value="Monthly" />
<input type="radio" id="switchYearly" name="switchPlan" value="Yearly" checked="checked" />
<label for="switchMonthly">Monthly</label>
<label for="switchYearly">Yearly</label>
<div >
  <div >
    <div>Monthly</div>
    <div>Yearly</div>
  </div>
</div>
</div>

<div id="flexy" >
  <div >
    <p>
      <span >
                         19.99
                    </span>
      <span >
                         199.99
                    </span>
    </p>
  </div>
</div>

As expressed, the problem is that on the "yearly" it always shows both pricing options.

CodePudding user response：

The issue is that you're only toggling the classes on and off when the radio buttons change. But since your div.flexy doesn't have a starting class, it just turns both .show-monthly and .show-annually on and off together.

Just give your .flexy div a starting class and it should work

Edit: also make sure that you give the corresponding radio button the checked attribute to start with the correct button checked at first.