1

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.

Cassidy Haas
  • 65
  • 12

2 Answers2

2

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>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
  • Thank you! That actually works perfectly. My only issue now is i realize by using display unset it got rid of my css. Is there an opposite to display none that will not remove css? I tried display:initial and display:inherit but neither worked. (inherit made it disappear, initial just didn't change anything) – Cassidy Haas Apr 17 '17 at 20:04
  • @CassidyHaas you're welcome. Yeah you shouldn't alter the style directly like that anyways, use CSS instead. Updated my answer. – Michael Coker Apr 17 '17 at 20:10
  • @CassidyHaas but "block" is the opposite of "none" for `display` on a `div` – Michael Coker Apr 17 '17 at 20:10
  • This new implementation doesn't hide it at all though. I updated my stylesheet and javascript to reflect you changes, but now it does not hide at all. – Cassidy Haas Apr 17 '17 at 20:28
  • @CassidyHaas then use `block` and `none`. you probably have conflicting CSS or something. my example works right? – Michael Coker Apr 17 '17 at 20:29
  • Yes, using block and none worked perfectly, thank you! – Cassidy Haas Apr 17 '17 at 20:33
1

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.

Community
  • 1
  • 1
broodjetom
  • 276
  • 1
  • 11