Question

为什么这不正常？

无论您输入什么值，它都会返回“无效的票证类型”

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"){
    document.getElementById("msg").innerHTML = "Invalid Ticket Type";
}

<强>解释

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

此处两个条件始终为true，因此它会进入if语句

注意：向vars添加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 2

让我们试着找出为什么它无法正常工作

您希望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个这样的&&条件会使代码的可读性降低。

<强>替代

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

＆＃13;

var possibilities = ["A", "B", "C", "D", "E"];

function isAvailable(c){
  return possibilities.indexOf(c) > -1
}

console.log(isAvailable("G"))
console.log(isAvailable("A"))

＆＃13;

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

＆＃13;

var possibilities = /(A|B|C|D|E)/

function isAvailable(c){
  return possibilities.test(c)
}

console.log(isAvailable("G"))
console.log(isAvailable("A"))

＆＃13;

Answer 3

尝试以下代码。

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

Answer 4

您需要在条件中使用AND而不是OR。在哪里，您要检查TicketType是否不是A，B＆amp; A中的一个。 C.所以条件将是

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

Answer 5

问题出在这里......

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

即使您输入A，B，C中的任何一个，此条件始终评估为true。例如，你输入A，第一个不等式失败，这是好的，但是所有其他的都会成功，你将得到＆＃34;无效的票证＆＃34;。

逻辑说：

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

所以将if-condition改为：

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

这样可以解决问题...... 如果TickType的任何一个是A或B或C，则ands将失败并且您将无法获得＆＃34;无效的票证＆＃34;

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

5 个答案: