onclick not working on chrome

Question

This is my code where onclick function is mentioned. This code works fine on firefox but it doesnt work on chrome. the onclick function is working on firefox i.e when i click on degree it displays the checkbox but when i run this same code on chrome it is not displaying the checkboxes.

function myFunction() {
  var x = document.getElementById("mydiv");
  var y = document.getElementById("mydiv1");

  if (x.style.display === "none") {
    x.style.display = "block";

    y.style.display = "none";
  } else {
    x.style.display = "none";
  }
}

function myFunction1() {
  var x = document.getElementById("mydiv1");
  var y = document.getElementById("mydiv");

  if (x.style.display === "none") {
    x.style.display = "block";

    y.style.display = "none";
  } else {
    x.style.display = "none";
  }
}

<select>
    <option value="Degree" onclick="myFunction()">Degree</option>
    <option value="Diploma" onclick="myFunction1()">Diploma</option>
</select>
<div id="mydiv" style="display:none;">
  <div>
    <label class="switch">
            <input type="checkbox" name="subject[]" value="Subject-1" id="myCheck" onclick="Function()">
            <span class="slider"></span>
        </label> Subject-1
  </div>
</div>
<div id="mydiv1" style="display:none;">
  <div>
    <label class="switch">
            <input type="checkbox" name="subject[]" value="Subject-1" id="myCheck" onclick="Function1()">
            <span class="slider"></span>
        </label> Subject-1
  </div>
</div>

Any suggestions? How can this code work on chrome?

Possible duplicate of [How to use onClick() or onSelect() on option tag in a JSP page?](https://stackoverflow.com/questions/3487263/how-to-use-onclick-or-onselect-on-option-tag-in-a-jsp-page) — CBroe, Jun 27 '18 at 12:08
Hello :). What does "does not work" mean? Doesn't it trigger? Does it act weird? Are there errors in your dev console? Ah, and `option` needs to be a child of `select`. — CodeF0x, Jun 27 '18 at 12:13

score 0 · Answer 1 · answered Jun 27 '18 at 12:16

The cause is your bad script type. In actual fact it'd work without the attribute, but otherwise change it to:

 <script type="application/javascript">
    function myFunction() {
      var x = document.getElementById("mydiv");
      var y = document.getElementById("mydiv1");

      if (x.style.display === "none") {
          x.style.display = "block";

          y.style.display="none";
      } else {
          x.style.display = "none";
      }
    }
    function myFunction1() {
      var x = document.getElementById("mydiv1");
      var y = document.getElementById("mydiv");

      if (x.style.display === "none") {
          x.style.display = "block";

          y.style.display="none";
      } else {
          x.style.display = "none";
      }
    }
 </script>

score 0 · Accepted Answer · answered Jun 27 '18 at 12:30

You edited it now, but at the beginning you where missing that a option element has to be child of a select element.

To your second problem:

You can't fire functions using onclick and onchange on option elements. You could fire a function by adding onchange on your select that fires, based on the input, either myFunction() or myFunction1() like this:

function someFunction() {
  var select = document.querySelector('select');
  var option = select.options[select.selectedIndex].value;

  if (option == "Degree") {
    myFunction();
  } else if (option == "Diploma") {
    myFunction1();
  } else {
    document.getElementById('mydiv').style.display = "none";
    document.getElementById('mydiv1').style.display = "none";
  }
}

function myFunction() {
  var x = document.getElementById("mydiv");
  var y = document.getElementById("mydiv1");

  if (x.style.display === "none") {
    x.style.display = "block";

    y.style.display = "none";
  } else {
    x.style.display = "none";
  }
}

function myFunction1() {
  var x = document.getElementById("mydiv1");
  var y = document.getElementById("mydiv");

  if (x.style.display === "none") {
    x.style.display = "block";

    y.style.display = "none";
  } else {
    x.style.display = "none";
  }
}

<select onchange="someFunction()">
  <option>Select something</option>
  <option value="Degree">Degree</option>
  <option value="Diploma">Diploma</option>
</select>
<div id="mydiv" style="display:none;">
  <div>
    <label class="switch">
            <input type="checkbox" name="subject[]" value="Subject-1" id="myCheck" onclick="Function()">
            <span class="slider"></span>
        </label> Subject-1
  </div>
</div>
<div id="mydiv1" style="display:none;">
  <div>
    <label class="switch">
            <input type="checkbox" name="subject[]" value="Subject-1" id="myCheck" onclick="Function1()">
            <span class="slider"></span>
        </label> Subject-1
  </div>
</div>

@AshwiniNemade Glad to help! – CodeF0x Jun 27 '18 at 13:13 — CodeF0x, Jun 27 '18 at 13:13

onclick not working on chrome

2 Answers2