onclick 在 chrome 上不起作用答案

【问题标题】：onclick not working on chromeonclick 在 chrome 上不起作用
【发布时间】：2018-06-27 12:07:32
【问题描述】：

这是我提到 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 上运行？

【问题讨论】：

How to use onClick() or onSelect() on option tag in a JSP page?的可能重复
no onchange 也不起作用...我之前尝试过
你好:)。 “不起作用”是什么意思？不会触发吗？是不是表现得很奇怪？您的开发控制台中是否有错误？啊，option 必须是 select 的子级。
让我猜猜，你现在把它改成了<option onchange="...">...？不，开个玩笑 - 不要让我们猜测，而是向我们展示你尝试了什么。请相应地编辑您的问题。
为什么options 没有select 元素？

标签： javascript html google-chrome firefox

【解决方案1】：

您现在对其进行了编辑，但在开始时您缺少 option 元素必须是 select 元素的子元素。

关于你的第二个问题：

您不能在 option 元素上使用 onclick 和 onchange 触发函数。您可以通过在 select 上添加 onchange 来触发函数，该函数根据输入 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>

【讨论】：

@AshwiniNemade 很高兴为您提供帮助！

【解决方案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>

【讨论】：