Question

此代码在mozilla firefox中运行完美，但它不能在谷歌浏览器中运行。帮助我如何让它在谷歌浏览器中运行。我想在谷歌浏览器中运行相同的代码。一切都在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>

Answer 2

选择选项的chrome不支持onClick evenet。您应该更改onclick到onChange，然后您的代码才能正常工作。

<select name="class" class="form-control" onChange="MyFunction();" id="inlineFormCustomSelect">


 <option value="Choose...">Choose...</option>
  <option value="10th">10th</option>
  <option value="12th">12th</option>

</select>

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

2 个答案: