OnClick не работает на Chrome

Question

Это мой код, в котором упоминается функция onclick. Этот код отлично работает на Firefox, но не работает на Chrome. функция onclick работает на firefox, т.е. когда я нажимаю на градус, он отображает флажок, но когда я запускаю этот же код в chrome, он не отображает флажки.

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>

Есть предложения? Как этот код может работать на Chrome?

Answer 1

Вы редактировали его сейчас, но в начале вы пропустили, что элемент option должен быть дочерним по отношению к элементу select.

К вашей второй проблеме:

Вы не можете запускать функции, используя onclick и onchange на option элементах. Вы можете запустить функцию, добавив onchange к вашему select, который запускается, основываясь на вводе, либо myFunction() или myFunction1(), например:

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>

Answer 2

Причина - ваш неверный тип сценария. На самом деле это будет работать без атрибута, но в противном случае измените его на:

 <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>