带 or 条件的 IF 语句（HTML 和 Javascript）

Question

为什么这不能正常工作？

无论您输入什么值，总是 returns "Invalid Ticket Type"

function start() {
  var TickType;
  TickType = document.getElementById("TicketType").value;
  TickType = String(TickType);
  var TicketQty = document.getElementById("TicketQty").value;

  if (TickType != "A" || TickType != "B" || TickType != "C") {
    document.getElementById("msg").innerHTML = "Invalid Ticket Type";
  }

  if (isNaN(TicketQty)) {
    document.getElementById("msg").innerHTML = "Non numeric qty has been entered";
  }

  if (TicketQty < 1 || TicketQty > 100) {
    document.getElementById("msg").innerHTML = "Qty is outside valid range";
  }
}

<h1>Ticket Sales</h1>
<p>Enter the ticket type (A, B or C)</p>
<input type="text" id="TicketType">

<p>Enter the quantity required (1-100)</p>
<input type="text" id="TicketQty">

<p>
  </br>
</p>

<button onclick="start()">Click me</button>
<p id="msg"></p>

Answer 1

试试下面的代码。

if (TickType != "A" && TickType != "B" && TickType !=  "C")

Answer 2

使用&&代替||

if (TickType != "A" || TickType != "B" || TickType !=  "C"){
    document.getElementById("msg").innerHTML = "Invalid Ticket Type";
}

说明

当TickType = "A"、TickType != "B"和TickType != "C"条件成立时。

这里的两个条件总是true，所以进入if语句

注意：将 trim 和 parseInt 添加到变量中，将 value="" 添加到字段中，并在测试前清空消息

function start() {
  var TickType = document.getElementById("TicketType").value.trim();
  var TicketQty = parseInt(document.getElementById("TicketQty").value, 10);
  document.getElementById("msg").innerHTML = "";

  if (TickType != "A" && TickType != "B" && TickType != "C") {
    document.getElementById("msg").innerHTML = "Invalid Ticket Type";
  }

  if (isNaN(TicketQty)) {
    document.getElementById("msg").innerHTML = "Non numeric qty has been entered";
  }

  if (TicketQty < 1 || TicketQty > 100) {
    document.getElementById("msg").innerHTML = "Qty is outside valid range";
  }
}

<h1>Ticket Sales</h1>
<p>Enter the ticket type (A, B or C)</p>
<input type="text" id="TicketType" value="" />

<p>Enter the quantity required (1-100)</p>
<input type="text" id="TicketQty" value="" />

<p><br/></p>

<button onclick="start()">Click me</button>
<p id="msg"></p>

Answer 3

您需要在条件中使用 AND 而不是 OR。其中，您正在检查 TicketType 是否不是 A、B 和 C 中的一种。因此条件将是

if (TickType != "A" && TickType != "B" && TickType !=  "C")
{
    document.getElementById("msg").innerHTML = "Invalid Ticket Type";
}

Answer 4

让我们试着弄清楚为什么它不能正常工作

您希望 TickType 为 A 或 B 或 C。现在，当您评估以下条件时，假设 TickType="A"

if (TickType != "A" || TickType != "B" || TickType !=  "C"){

TickType != "A" 会产生 false 因为它是相等的。
但是 TickType != "B" 会产生 true 因为 TickType 是 A 而不是 B

和 if 找到匹配的条件并将 innerHTML 设置为 "Invalid Ticket Type"

现在正确的条件是它不在任何一个值中，即

if (TickType != "A" && TickType != "B" && TickType !=  "C"){

现在这行得通了，但是如果您将来要说 10 个这样的字符怎么办，添加 10 个这样的 && 条件会降低代码的可读性。

备选方案

创建一个包含所有这些可能性的数组并检查索引。

var possibilities = ["A", "B", "C", "D", "E"];

function isAvailable(c){
  return possibilities.indexOf(c) > -1
}

console.log(isAvailable("G"))
console.log(isAvailable("A"))

创建正则表达式并测试有效性：

var possibilities = /(A|B|C|D|E)/

function isAvailable(c){
  return possibilities.test(c)
}

console.log(isAvailable("G"))
console.log(isAvailable("A"))

Answer 5

问题就在这里...

if (TickType != "A" || TickType != "B" || TickType !=  "C"){
    document.getElementById("msg").innerHTML = "Invalid Ticket Type";
}

此条件的计算结果始终为真，即使您输入 A、B、C 中的任何一个。例如，您输入 A，第一个不等式失败，这没关系，但其他所有不等式都会成功，您将得到 "Invalid Ticket".

逻辑是这样的：

!(A || B || C) <-> !A && !B && !C

所以将 if 条件更改为：

if (TickType != "A" && TickType != "B" && TickType !=  "C"){
   document.getElementById("msg").innerHTML = "Invalid Ticket Type";
}

这样就可以了... 如果 TickType 中的任何一个是 A 或 B 或 C，则 ands 将失败并且您不会得到 "Invalid Ticket"

带 or 条件的 IF 语句（HTML 和 Javascript）

IF statement with or conditions (HTML and Javascript)

html

javascript

if-statement

or-condition