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

原因是您的脚本类型错误。实际上，没有该属性也可以工作，但可以将其更改为：

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

Answer 2

您现在对其进行了编辑，但是一开始您就错过了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>

onclick在chrome上不起作用

2 个答案: