CODEWITHSUNDEEP
javascripthtmlcss
Cassidy Haas
Cassidy Haas

Reputation: 65

Hiding and showing html elements with radio button and javascript style=none

I am trying to write a function that will show or hide an html element (contained in a div) using javascript. Right now I have 3 radio buttons (to eventually show/hide 3 elements depending on radio button selected, but right now I am just trying to hide one element (month) if year or week is selected, and to show it if month is selected. My html is:

<div id="setting">
      <input type="radio" id="year" name="view" value="year"> year<br>
      <input type="radio" id="month" name="view" value="month"> month<br>
      <input type="radio" id="week" name="view" value="week"> week
    </div>
    <div id="cal">
    (element here I am trying to show/hide)
</div>

My javascript is:

function defineSetting (){
              var setting = document.getElementById('setting').checked;
              if(setting =='year'){
                  document.getElementById("cal").style.display = "none";

              }else if(setting =='month'){
                  document.getElementById("cal").style.display = "unset";

              }else if(setting =='week'){
                  document.getElementById("cal").style.display = "none";
              }
            }

I am also not super experienced with javascript and am trying to figure out how to call the function (if it works). If it is in the document ready function will it run when the page is loaded or do i need to call it somewhere.

Upvotes: 1

Views: 1787

Answers (2)

Michael Coker
Michael Coker

Reputation: 53674

I think this is what you're going for. You want to add an event listener to the buttons, and pass the value of the input that's checked to the defineSetting() function that hides/shows your #cal element. I also simplified your test in defineSetting()

<div id="setting">
  <input type="radio" id="year" name="view" value="year" class="setting"> year<br>
  <input type="radio" id="month" name="view" value="month" class="setting"> month<br>
  <input type="radio" id="week" name="view" value="week" class="setting"> week
</div>

<div id="cal">
  (element here I am trying to show/hide)
</div>

<style>
  .hidden { display: none; }
</style>

<script>
var inputs = document.getElementsByClassName('setting'),
    setting;

for (var i = 0; i < inputs.length; i++) {
  var el = inputs[i];
  el.addEventListener('change', function() {
    defineSetting(this.value);
  })
}

function defineSetting(setting) {
  if (setting == 'year' || setting == 'week') {
    document.getElementById("cal").classList.add('hidden');
  } else {
    document.getElementById("cal").classList.remove('hidden');
  }
}
</script>

Upvotes: 2

broodjetom
broodjetom

Reputation: 286

This will help you out: How to get value of selected radio button?

You are trying to get the checked value of a div element, but this element doesn't have that. The input element do have that property so that's where you can get it from.

Upvotes: 1

Related Questions