Question

我的目标是显示3个按钮，一旦点击其中2个按钮，它将显示相应的内容并隐藏按钮。这是我的代码。问题是它永远不会到达if语句。 Y 表示点击次数， X 表示要显示的值。

＆＃13;

var x = 0;
var y = 0;

function A() {
  var x = x + 1;
  console.log("+1");
  var y = y + 1;
}

function B() {
  var x = x + 10
  console.log("+10");
  var y = y + 1;
}

function C() {
  var x = x + 100;
  console.log("+100");
  var y = y + 1;
}
if (y = 2) {
  document.getElementById("ButtonA").className += "hide";
  document.getElementById("ButtonB").className += "hide";
  document.getElementById("ButtonB").className += "hide";
  console.log("Hide Buttons A-C")
} else if (x = 11) {
  document.getElementById("A").className += " display";
  document.getElementById("B").className += " display";
  console.log("Display A+B");
} else if (x = 101) {
  document.getElementById("A").className += " display";
  document.getElementById("C").className += " display";
  console.log("Display A+C");
} else if (x = 110) {
  document.getElementById("B").className += " display";
  document.getElementById("C").className += " display";
  console.log("Display B+C");
}

＆＃13;

.hide {
  display: none;
}

.display {
  display: block;
}

.w3-col {
  display: none;
}

＆＃13;

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<h1 class="w3-center">Banks</h1>
<div class="w3-row-padding w3-center">
  <button onclick="A()" id="ButtonA">A</button>
  <button onclick="B()" id="ButtonB">B</button>
  <button onclick="C()" id="ButtonC">C</button>
</div>
<br>
<div class="w3-row-padding">
  <div class="w3-col l4 s4 w3-center" id="A">
    <div class="w3-container w3-red">
      <h1>A</h1>
    </div>
  </div>
  <div class="w3-col l4 s4 w3-center" id="B">
    <div class="w3-container w3-green">
      <h1>B</h1>
    </div>
  </div>
  <div class="w3-col l4 s4 w3-center" id="C">
    <div class="w3-container w3-blue">
      <h1>C</h1>
    </div>
  </div>
</div>

＆＃13;

Answer 1

如您在评论中所述 -

在if / else中使用==或===作为比较器，因为=是设定者
更新值
不要在函数内部使用var重新声明，因为它们已经在JavaScript的顶部声明了

那就是说，你的if / else逻辑有点不稳定。例如，任意两次点击设置y等于2。一切都被隐藏了（如果你修复了将hide添加到#ButtonB两次的错误。如果你愿意，我可以帮助你解决这个问题，但这应该让你接近目标。

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <style>
    .hide {
      display: none;
    }
    
    .display {
      display: block;
    }
    
    .w3-col {
      display: none;
    }
  </style>
</head>

<body>
  <script type="text/javascript">
    var x = 0;
    var y = 0;

    function A() {
      x = x + 1;
      console.log("+1");
      y = y + 1;
      check();
    }

    function B() {
      x = x + 10
      console.log("+10");
      y = y + 1;
      check();
    }

    function C() {
      x = x + 100;
      console.log("+100");
      y = y + 1;
      check();
    }

    function check() {
      console.log("y=", y, "x=", x)
      if (y == 2) {
        document.getElementById("ButtonA").className += "hide";
        document.getElementById("ButtonB").className += "hide";
        document.getElementById("ButtonC").className += "hide";
        console.log("Hide Buttons A-C")
      } else if (x == 11) {
        document.getElementById("A").className += " display";
        document.getElementById("B").className += " display";
        console.log("Display A+B");
      } else if (x == 101) {
        document.getElementById("A").className += " display";
        document.getElementById("C").className += " display";
        console.log("Display A+C");
      } else if (x == 110) {
        document.getElementById("B").className += " display";
        document.getElementById("C").className += " display";
        console.log("Display B+C");
      }
    }
  </script>
  <h1 class="w3-center">Banks</h1>
  <div class="w3-row-padding w3-center">
    <button onclick="A()" id="ButtonA">A</button>
    <button onclick="B()" id="ButtonB">B</button>
    <button onclick="C()" id="ButtonC">C</button>
  </div>
  <br>
  <div class="w3-row-padding">
    <div class="w3-col l4 s4 w3-center" id="A">
      <div class="w3-container w3-red">
        <h1>A</h1>
      </div>
    </div>
    <div class="w3-col l4 s4 w3-center" id="B">
      <div class="w3-container w3-green">
        <h1>B</h1>
      </div>
    </div>
    <div class="w3-col l4 s4 w3-center" id="C">
      <div class="w3-container w3-blue">
        <h1>C</h1>
      </div>
    </div>
  </div>
</body>

</html>

Answer 2

我至少可以看到两件事：

script标记由js读取。更重要的是，它是在渲染按钮之前读取的。
if语句也被执行。但是在检查的那一刻，没有值会导致代码执行到其中一个流程
当您在函数内部键入var x时，它被声明为局部变量，这就是为什么它将始终存储相同的值。

而不是这个，你应该声明一个单独的函数来检查值：

function doCheck(){
    var buttonA = document.getElementById("ButtonA"),
        buttonB = document.getElementById("ButtonB"),
        buttonC = document.getElementById("ButtonC");
    if (y = 2) {
                buttonA.className += "hide";
                buttonB.className  += "hide";
                buttonC.className += "hide";
                console.log("Hide Buttons A-C")
            } else if (x = 11) {
                buttonA.className += " display";
                buttonB.className += " display";
                console.log("Display A+B");
            } else if (x = 101) {
                buttonA.className += " display";
                buttonC.className += " display";
                console.log("Display A+C");
            } else if (x = 110) {
                buttonB.className += " display";
                buttonC.className += " display";
                console.log("Display B+C");
            }
}

现在，调用所有这三个函数内部的函数（对代码进行一些修正）：

function A() {
      x = x + 1;
      console.log("+1");
      y = y + 1;
      doCheck();
    }

function B() {
  x = x + 10
  console.log("+10");
  y = y + 1;
  doCheck();
}

function C() {
  x = x + 100;
  console.log("+100");
  y = y + 1;
  doCheck();
}

建议1 为函数提供更易理解的名称，而调试它会更容易阅读代码。

建议2 不是一直按id访问元素而是浪费时间编写几乎相同的代码，只需在函数顶部声明相应的变量并引用变量< / strong>代表元素

如果声明未正确应用

2 个答案: