Question

document.getElementById("Btn1").onclick = function() {
  var aa = document.getElementById("fInput").value;
  var a = Number(aa);
  var bb = document.getElementById("sInput").value;
  var b = Number(bb);
  if (a == "" || b == "") {
    alert("Fill both inputs");
  } else if (a < 1 || a > 3 || b < 1 || b > 3) {
    alert(" Fields can only contain values ' 1 & 2 & 3 ' ");
  } else if (a == b) {
    alert("Not Possible !!");
  } else {
    var myArray = ['frBox', 'snBox', 'thirdBox'];
    var id1 = myArray[a - 1];
    var id2 = myArray[b - 1];
    Swap(id1, id2);
  }
}

function Swap(id1, id2) {
  var x = document.getElementById(id1).innerHTML;
  var y = document.getElementById(id2).innerHTML;
  document.getElementById(id1).innerHTML = y;
  document.getElementById(id2).innerHTML = x;
}

.fBox {
  height: 100px;
  width: auto;
  background-color: yellow;
  color: green;
}

.sBox {
  height: 100px;
  width: auto;
  background-color: aqua;
  color: black;
}

.thBox {
  height: 100px;
  width: auto;
  background-color: rgba(23, 84, 244, 0.4);
  color: rgb(45, 65, 77);
}

button {
  height: auto;
  width: 150px;
  text-align: center;
  background-color: crimson;
  color: white;
  border-radius: 10px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Test Page</title>
</head>

<body>
  <div class="fBox" id="frBox">
    <p>
      Hello From the first box.
    </p>
  </div>
  <div class="sBox" id="snBox">
    <p>
      JavaScript is Cool !!!
    </p>
  </div>
  <div class="thBox" id="thirdBox">
    <p>
      I am Learning JavaScript !!!
    </p>
  </div><br>
  <input id="fInput" placeholder="Num 1">
  <input id="sInput" placeholder="Num 2"><br><br>
  <button id="Btn1"> Click to Swap </button>
</body>

</html>

当我在任何输入中输入0并在其他输入中输入1到3之间的数字并单击按钮时，它会提示“同时填写两个输入”。但是我希望看到“字段只能包含值'1＆2＆3'“警报。或者当我将两个输入都填充为0时，再次发生此问题！ 0是否在JavaScript中用作“”，或者我的代码有问题？

Answer 1

0和“”在Javascript中的求值为false。

var x = 0;
if (x) {
  console.log('Will not be called.');
}

var y = '';
if (y) {
  console.log('Will not be called.');
}

正如其他一些答案所暗示的那样，使用==和===也存在着懒惰vs严格平等。

但这并不能解决您的问题，因为您正在执行var a = Number(aa);。如果在其中一项输入中输入0，将得到Number(0)，即0。如果您未在其中一项输入中输入任何内容，则会得到Number('')，即0。

我要替换

if (a == "" || b == "") { ... }

使用

if (!a || !b) { ... }
// shorthand version of (if a === false || b === false)
// which will be the case if a or b === 0

如果在任何一个输入中输入了0，或者任何一个输入都为空，那么您将得到a或b为0，这将评估为假。

Answer 2

简短地：

如果您使用==，请是。
为避免这种情况，请使用===。

更长：

==（双倍等于）做了一些奇怪的事情，因为

它尝试将值转换为相同的类型（在这种情况下，转换为数字），并且
Number("") === 0

结论：

最好改用Strict equality operator (===)：

document.getElementById("Btn1").onclick = function() {
  var aa = document.getElementById("fInput").value;
  var a = Number(aa);
  var bb = document.getElementById("sInput").value;
  var b = Number(bb);
  if (aa===""||bb==="") {
    alert("Fill both inputs");
  } else if (a < 1 || a > 3 || b < 1 || b > 3) {
    alert(" Fields can only contain values ' 1 & 2 & 3 ' ");
  } else if (a == b) {
    alert("Not Possible !!");
  } else {
    var myArray = ['frBox', 'snBox', 'thirdBox'];
    var id1 = myArray[a - 1];
    var id2 = myArray[b - 1];
    Swap(id1, id2);
  }
}

function Swap(id1, id2) {
  var x = document.getElementById(id1).innerHTML;
  var y = document.getElementById(id2).innerHTML;
  document.getElementById(id1).innerHTML = y;
  document.getElementById(id2).innerHTML = x;
}

.fBox {
  height: 100px;
  width: auto;
  background-color: yellow;
  color: green;
}

.sBox {
  height: 100px;
  width: auto;
  background-color: aqua;
  color: black;
}

.thBox {
  height: 100px;
  width: auto;
  background-color: rgba(23, 84, 244, 0.4);
  color: rgb(45, 65, 77);
}

button {
  height: auto;
  width: 150px;
  text-align: center;
  background-color: crimson;
  color: white;
  border-radius: 10px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Test Page</title>
</head>

<body>
  <div class="fBox" id="frBox">
    <p>
      Hello From the first box.
    </p>
  </div>
  <div class="sBox" id="snBox">
    <p>
      JavaScript is Cool !!!
    </p>
  </div>
  <div class="thBox" id="thirdBox">
    <p>
      I am Learning JavaScript !!!
    </p>
  </div><br>
  <input id="fInput" placeholder="Num 1">
  <input id="sInput" placeholder="Num 2"><br><br>
  <button id="Btn1"> Click to Swap </button>
</body>

</html>

在JavaScript中，数字零是否可以用作“”？

2 个答案:

简短地：

更长：

结论：

查看更多信息