I'm looking for help changing the display property of a div class using javascript and sessionStorage. The sessionStorage variable is visible in console but I am stuck changing the CSS. I've used getElementByClassName and also getElementByID and neither will show/hide the blocks - I'm seeing both blocks - rather than just one block conditional on the value of the sessionStorage variable. Any clues welcome?

function setUpPopupRegistrationForm() {

  $('.js-popup-register-button').on('click', function() {

    let storage = window.sessionStorage;
    let selectedRole = this.dataset.role;

    storage.clear('selectedRole');
    storage.setItem('selectedRole', selectedRole);

    var r1 = document.getElementByClassName("radiocustom")[0];
    var r2 = document.getElementByClassName("radiocustom2")[0];

    if (selectedRole == "investor-member") {

      r1.style.display = "block";
      r2.style.display = "none";

    } else if (selectedRole == "investor") {

      r1.style.display = "none";
      r2.style.display = "block";

    }

    navigateToNextStep(this);

  });

}

<div  data-step="1">
  <div >
    <div  data-role="investor"><span>Guest</span></div>
    <div  data-role="investor-member"><span>Member</span></div>
  </div>
</div>

<div  data-step="2">
  <div >
    <div >
      <input type="radio" id="chk_sophisticated" name="investor_type" value="Sophisticated Investor" checked="checked">
      <label for="chk_sophisticated"> Sophisticated Investor</label>
      <br>
      <input type="radio" id="chk_hnw_individual" name="investor_type" value="High Net Worth Individual">
      <label for="chk_hnw_individual"> High Net Worth Individual</label>
      <br>
      <input type="radio" id="chk_hnw_investor" name="investor_type" value="High Net Worth Investor">
      <label for="chk_hnw_investor"> High Net Worth Company, unincorporated association or trust</label>
      <br>
    </div>
    <div >
      <input type="radio" id="chk_individual" name="other_type" value="Individual" checked="checked">
      <label for="chk_individual"> Individual</label>
      <br>
      <input type="radio" id="chk_networker" name="other_type" value="Business Networker">
      <label for="chk_networker"> Business Networker</label>
      <br>
      <input type="radio" id="chk_corporate" name="other_type" value="Corporate">
      <label for="chk_corporate"> Corporate</label>
      <br>
    </div>
    <br>
    <br>
    <div >
      <div ><span>Confirm</span></div>
    </div>
  </div>

CodePudding user response：

This is what you should do .

document.querySelector(".radiocustom2").style.display = "none";

or else you can set you r1 like this.

const r1 = document.querySelector(".radiocustom");

You should also clear browser cache to clear any JavaScript that could have logged in the cache.