Javascript - Error in hiding and calling specific "Div" (Calling specific div - onchange)

Question

I have a dropdown box to list 2015/2016 years. Each is provided as a div, under which it has radio buttons for (Monthly & Weekly).

If i select 2015 in dropdown - 2015 Monthly & Weekly should be view. Same for 2016.

My issue is, both the year's div are viewed together in same page. Could someone give a suggestion please. Thanks for your time and help.

My JS Code:

<!DOCTYPE html>
<html>
  <body>
    <select  class="dropdown"  id="year" name="year" size="1" onchange="changeDiv('year');">
      <option value="2015" selected="selected">2015</option>
      <option value="2016">2016</option> 
    </select>

    <div id="2015">
      <B>AAAAAAA</B>
      <input type="radio"   checked="checked" onclick="javascript:changeDiv('2015Monthly');" />Monthly
      <input type="radio" onclick="javascript:changeDiv('2015Weekly');" align="left" />Weekly

      <div id="2015Monthly" ><B>2015 - Monthly</B></div>
      <div id="2015Weekly" ><B>2015 - Weekly</B></div>

      <div id="2016">
        <B>HHHHHHH</B>
        <input type="radio"  checked="checked" onclick="javascript:changeDiv('2016Monthly');" />Monthly
        <input type="radio" onclick="javascript:changeDiv('2016Weekly');" />Weekly
        <div id="2016Monthly" ><B>2016 - Monthly</B></div>
        <div id="2016Weekly" ><B>2016 - Weekly</B></div>
        <script>
          function changeDiv(divId)
          {
            if(divId=='2015Monthly')
            {
              document.getElementById(divId).style.display="block";
              document.getElementById('2015Weekly').style.display="none";
            }else if(divId=='2015Weekly')
            {
              document.getElementById(divId).style.display="block";
              document.getElementById('2015Monthly').style.display="none";
            }else if(divId=='2016Monthly')
            {
              document.getElementById(divId).style.display="block";
              document.getElementById('2016Weekly').style.display="none";
            }else if(divId=='2016Weekly')
            {
              document.getElementById(divId).style.display="block";
              document.getElementById('2016Monthly').style.display="none";

            }else if(divId=='2016')
            {
              document.getElementById(divId).style.visibility="visible";
              document.getElementById('2015').style.visibility="hidden";
            }else if(divId=='2015')
            {
              document.getElementById(divId).style.visibility="visible";
              document.getElementById('2016').style.visibility="hidden";
            }
          }

        </script>
        </body>
      </html>

Output:

the function changeDiv will be called only when the dropdown value is changed.. First time when it loads it will show all the divs,ryt? — Jibin Balachandran, Feb 03 '16 at 11:18
Actually it shouldn't. I need to view only 2015 div as default ( along with monthly div enabled inside 2015). I am not able to achieve it. Appreciate ur help. — Disera, Feb 03 '16 at 12:29

Mosh Feu · Accepted Answer · 2016-02-03T13:06:50.197

The (main) problem is that instead of passing the id your pass the string year.

So you need to change the onchange value to this.value so it will take the value of the selection (2015/2015).

<!DOCTYPE html>
<html>
  <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <select class="dropdown" id="year" name="year" size="1" onchange="changeDiv(this.value);">
      <option value="2015" selected="selected">2015</option>
      <option value="2016">2016</option> 
    </select>

    <div id="2015">
      <B>AAAAAAA</B>
      <input type="radio" checked="checked" onclick="javascript:changeDiv('2015Monthly');" name="2015_type" />Monthly
      <input type="radio" onclick="javascript:changeDiv('2015Weekly');" align="left" name="2015_type" />Weekly

      <div id="2015Monthly" ><B>2015 - Monthly</B></div>
      <div id="2015Weekly" ><B>2015 - Weekly</B></div>
    </div>
    <div id="2016">
      <B>HHHHHHH</B>
      <input type="radio" checked="checked" onclick="javascript:changeDiv('2016Monthly');" name="2016_type" />Monthly
      <input type="radio" onclick="javascript:changeDiv('2016Weekly');" name="2016_type" />Weekly
      <div id="2016Monthly" ><B>2016 - Monthly</B></div>
      <div id="2016Weekly" ><B>2016 - Weekly</B></div>
    </div>
    <script>
      function changeDiv(divId)
      {
        if(divId=='2015Monthly')
        {
          document.getElementById(divId).style.display="block";
          document.getElementById('2015Weekly').style.display="none";
        }else if(divId=='2015Weekly')
        {
          document.getElementById(divId).style.display="block";
          document.getElementById('2015Monthly').style.display="none";
        }else if(divId=='2016Monthly')
        {
          document.getElementById(divId).style.display="block";
          document.getElementById('2016Weekly').style.display="none";
        }else if(divId=='2016Weekly')
        {
          document.getElementById(divId).style.display="block";
          document.getElementById('2016Monthly').style.display="none";

        }else if(divId=='2016')
        {
          document.getElementById(divId).style.display="block";
          document.getElementById('2015').style.display="none";
        }else if(divId=='2015')
        {
          document.getElementById(divId).style.display="block";
          document.getElementById('2016').style.display="none";
        }
      }
      $('#year').change();
      $(':checked').trigger('click');
    </script>
  </body>
</html>

http://output.jsbin.com/lileze

Thank you Mosh Feu!! But, By Default, i need to have Only 2015 div enabled (also Monthly div enabled inside 2015). Here when page loads both 2015 & 2016 div are viewed. Please suggest an idea. — Disera, Feb 03 '16 at 12:26
I made some changes like change the `visibility` to `display`. Also, I trigger the `select` and the `radio buttons` so the `change` and `click` event will fire and show/hide the right elements. If something is not clear, let me know. — Mosh Feu, Feb 03 '16 at 12:34
I don't get where to use the trigger event and also whats the reason to name the radio buttons in both divs (2015/2016). — Disera, Feb 03 '16 at 13:02
1. The script in the snippet is added to the bottom of the `body`. I was updated the answer so now the `trigger` are at the bottom of the script. 2. The reason I was added the `name` attribute is becuase if you don't do this, you can check multiple radio buttons at the same time (like in your example). [See this question](http://stackoverflow.com/questions/5419459/how-to-set-that-only-one-radio-button-can-be-checked) — Mosh Feu, Feb 03 '16 at 13:06

score 0 · Answer 2 · answered Feb 03 '16 at 11:43

There are some thimgs that you are missing. For example how call the function on change. The parameter of function is not the correct one. This solution should work:

<!DOCTYPE html>
<html>
<body>



 <select  id="mySelect" name="year" size="1" onchange="myFunction()">
      <option value="2015" selected="selected">2015</option>
      <option value="2016">2016</option> 
    </select>

 <div id="2015" style="display:block">
      <B>AAAAAAA</B>

 <input type="radio"   checked="checked" onclick="javascript:changeDiv('2015Monthly');" />Monthly
      <input type="radio" onclick="javascript:changeDiv('2015Weekly');" align="left" />Weekly

      <div id="2015Monthly" ><B>2015 - Monthly</B></div>
      <div id="2015Weekly" ><B>2015 - Weekly</B></div>
      </div>

 <div id="2016" style="display:none">
        <B>HHHHHHH</B>
        <input type="radio"  checked="checked" onclick="javascript:changeDiv('2016Monthly');" />Monthly
        <input type="radio" onclick="javascript:changeDiv('2016Weekly');" />Weekly
        <div id="2016Monthly" ><B>2016 - Monthly</B></div>
        <div id="2016Weekly" ><B>2016 - Weekly</B></div>
        </div>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("mySelect").value;
    document.getElementById("demo").innerHTML = "You selected: " + x;

 if(x=='2016')
            {

              document.getElementById(x).style.display="block";
              document.getElementById('2015').style.display="none";
            }else if(x=='2015')
            {
              document.getElementById(x).style.display="block";
              document.getElementById('2016').style.display="none";
            }
}
</script>

</body>
</html>

Javascript - Error in hiding and calling specific "Div" (Calling specific div - onchange)

2 Answers2