Javascript 代码在 Mozilla Firefox 中运行，但在 Google Chrome 中不运行

Question

此代码在 mozilla firefox 中运行完美，但在 google chrome 中无法运行。帮助我如何让它在谷歌浏览器中运行。我希望同样的代码在谷歌浏览器中运行。在 Firefox 中一切正常

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 name="class" class="form-control" id="inlineFormCustomSelect">
  <option value="Choose...">Choose...</option>
  <option value="10th" onclick="myFunction()">10th</option>
  <option value="12th" onclick="myFunction1()">12th</option>
</select>

<div class="form-group row">
  <label for="inputSubjects3" class="col-sm-2 col-form-label">Subjects</label>
  <div class="col-sm-6">
    <div id="mydiv" style="display:none;">
      <div>
        <label class="switch">
            <input type="checkbox" name="subject[]" value="Maths">
            <span class="slider"></span>
        </label> Maths
      </div>
      <div>
        <label class="switch">
            <input type="checkbox" name="subject[]" value="Science">
            <span class="slider"></span>
        </label> Science
      </div><br>
      <input type="submit" value="Proceed" name="submit" class="wpcf7-submit">
    </div>
    <div id="mydiv1" style="display:none;">
      <div>
        <label class="switch">
            <input type="checkbox" name="subject[]" value="Physics">
            <span class="slider"></span>
        </label> Physics
      </div>
      <div>
        <label class="switch">
            <input type="checkbox" name="subject[]" value="Chemistry">
            <span class="slider"></span>
        </label> Chemistry
      </div><br>
      <input type="submit" value="Proceed" name="submit" class="wpcf7-submit"><br><br>
</div>

我希望相同的代码在谷歌浏览器中运行。它根本不起作用。

Answer 1

我认为 Chrome 不喜欢您尝试将 click 监听器添加到 option 标记。尝试添加一个 change 监听器 - 并尽可能使用 Javascript 正确添加它，而不是在内联属性中(这与 eval 一样糟糕):

document.querySelector('#inlineFormCustomSelect')
  .addEventListener('change', function() {
    const { value } = this;
    if (value === '10th') myFunction();
    if (value === '12th') myFunction1();
  });

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 name="class" class="form-control" id="inlineFormCustomSelect">
  <option value="Choose...">Choose...</option>
  <option value="10th">10th</option>
  <option value="12th">12th</option>
</select>
<div class="form-group row">
  <label for="inputSubjects3" class="col-sm-2 col-form-label">Subjects</label>
  <div class="col-sm-6">
    <div id="mydiv" style="display:none;">
      <div>
        <label class="switch">
            <input type="checkbox" name="subject[]" value="Maths">
            <span class="slider"></span>
        </label> Maths
      </div>
      <div>
        <label class="switch">
            <input type="checkbox" name="subject[]" value="Science">
            <span class="slider"></span>
        </label> Science
      </div><br>
      <input type="submit" value="Proceed" name="submit" class="wpcf7-submit">
    </div>
    <div id="mydiv1" style="display:none;">
      <div>
        <label class="switch">
            <input type="checkbox" name="subject[]" value="Physics">
            <span class="slider"></span>
        </label> Physics
      </div>
      <div>
        <label class="switch">
            <input type="checkbox" name="subject[]" value="Chemistry">
            <span class="slider"></span>
        </label> Chemistry
      </div><br>
      <input type="submit" value="Proceed" name="submit" class="wpcf7-submit"><br><br>
    </div>