JavaScript/HTML 不显示现有数组

Question

所以我被分配去做一个小小的机场信息系统。我运行ning 什么都有，但我运行一期。当我输入除 356 航班以外的 8 个列出的航班之一时，它会显示我的警告框。我希望它运行这样用户可以输入所有 8 个航班号没问题，但我只能查看航班 356。我只希望在我输入另一个未列出的航班时出现警告框在我的数组中。现在，我取消了 else if 语句，列出的所有 8 个数组的一切运行都很顺利。但是放回去，问题又来了。这是我的代码。如果有问题，请告诉我。谢谢！

<html>
<head>
<title>KBOS Airport</title>
<script>

<!-- hide script away from browsers
function flightInfo(got) {
//obtain flight info
for (i=0; i<8; i++) {
    if (got == flightNumber[i]) break;
//problem condition below?  
else if (got !== flightNumber[i]); alert("The flight number you have entered is invalid. Please refresh page and try again."); return;

}//for

    //print results
    document.write('<table border=1 align="center"><tr bgcolor=#FFFFCC><th>'+ 'Here is your flight info:<br />' + '</th>');
    document.write('<tr bgcolor=#DDDDDD><td> Airline: ' + airline[i] + '<br />' + '</tr>');
    document.write('<tr bgcolor=#DDDDDD>' + '<td>' + 'Flight Number: ' + flightNumber[i] + '<br />' + '</td>' + '</tr>');
    document.write('<tr bgcolor=#DDDDDD>' + '<td>' + 'Terminal: ' + terminal[i] + '<br />' + '</td>' + '</tr>');
    document.write('<tr bgcolor=#DDDDDD>' + '<td>' + 'Gate: ' + gate[i] + '<br />' + '</td>' + '</tr>');
    document.write('<tr bgcolor=#DDDDDD>' + '<td>' + 'Departure Time: ' + flttime[i] + "<br />" + '</td>' + '</tr>' + '</table>');
    document.write('<h1 align="center">' + 'If your flight departure time is 1/2 hr from now, please proceed to the gate.  <br/>' + '</h1>');
    document.write('<h1 align="center">' + 'Thank you for choosing our airline.  Have a safe and pleasnat trip. <br/>' + '</h1>');
}//flightInof()

//define flight data
airline = ["Lufthansa", "Swiss Air", "USAir", "Delta Air Lines", "British Airways", "Air France", "American Airlines", "United Airlines"];
flightNumber = [356, 89, 1230, 952, 513, 910, 454, 350];
terminal = ["E", "D", "A", "C", "B", "F", "G", "H"];
gate = [5, 10, 3, 7, 1, 8, 12, 15];
flttime = ["0600AM", "0623AM", "0644AM", "0700AM", "0704AM", "0825AM", "1000AM", "1030AM"]; 

//traveler flight
input = prompt("Please, select your flight number: 356, 89, 1230, 952, 513, 910, 454 or 350", " ");
flightInfo(input);
-->


</script>
</head>
<body>
</body>

Answer 1

您的这部分代码有问题：

//obtain flight info
for (i=0; i<8; i++) {
    if (got == flightNumber[i]) break;
    //problem condition below?  
    else if (got !== flightNumber[i]); alert("The flight number you have entered is invalid. Please refresh page and try again."); return;
}//for

首先，else if 语句末尾的分号终止语句，alert() 和 return 在第一个 [=] 中找不到元素后立即触发16=].

其次，即使else if后面没有分号，else if仍然会在第一个元素检查上面的if之后立即被调用，如果不是成立。因此，正如您所写的那样，for 循环总是只进行一次迭代，找到元素或 return 错误。

你可以这样修复它（不需要 else if，你可以使用布尔变量来跟踪是否找到元素）：

let found = false;

//obtain flight info
for (i=0; i<8; i++) {
    if (got == flightNumber[i]) {
        found = true;
        break;
    }
}//for

if(!found) {
    alert("The flight number you have entered is invalid. Please refresh page and try again.");
    return;
} else {
   // print results
   // ...
}

您可以使用 array.indexOf() 方法代替 for 循环，该方法查找数组中第一次出现的元素，return 数组中的元素索引，如果未找到则为 -1如下所示：

<html>
<head>
<title>KBOS Airport</title>
<script>

<!-- hide script away from browsers
function flightInfo(got) {
got = parseInt(got); // cast string to int for the indexOf method
//obtain flight info
let i = flightNumber.indexOf(got);

  if (i == -1) {
    alert("The flight number you have entered is invalid. Please refresh page and try again.");
    return;
  } else {
    //print results
    document.write('<table border=1 align="center"><tr bgcolor=#FFFFCC><th>'+ 'Here is your flight info:<br />' + '</th>');
    document.write('<tr bgcolor=#DDDDDD><td> Airline: ' + airline[i] + '<br />' + '</tr>');
    document.write('<tr bgcolor=#DDDDDD>' + '<td>' + 'Flight Number: ' + flightNumber[i] + '<br />' + '</td>' + '</tr>');
    document.write('<tr bgcolor=#DDDDDD>' + '<td>' + 'Terminal: ' + terminal[i] + '<br />' + '</td>' + '</tr>');
    document.write('<tr bgcolor=#DDDDDD>' + '<td>' + 'Gate: ' + gate[i] + '<br />' + '</td>' + '</tr>');
    document.write('<tr bgcolor=#DDDDDD>' + '<td>' + 'Departure Time: ' + flttime[i] + "<br />" + '</td>' + '</tr>' + '</table>');
    document.write('<h1 align="center">' + 'If your flight departure time is 1/2 hr from now, please proceed to the gate.  <br/>' + '</h1>');
    document.write('<h1 align="center">' + 'Thank you for choosing our airline.  Have a safe and pleasnat trip. <br/>' + '</h1>');
  }
}//flightInfo()

//define flight data
let airline = ["Lufthansa", "Swiss Air", "USAir", "Delta Air Lines", "British Airways", "Air France", "American Airlines", "United Airlines"];
let flightNumber = [356, 89, 1230, 952, 513, 910, 454, 350];
let terminal = ["E", "D", "A", "C", "B", "F", "G", "H"];
let gate = [5, 10, 3, 7, 1, 8, 12, 15];
let flttime = ["0600AM", "0623AM", "0644AM", "0700AM", "0704AM", "0825AM", "1000AM", "1030AM"]; 

//traveler flight
let input = prompt("Please, select your flight number: 356, 89, 1230, 952, 513, 910, 454 or 350", " ");
flightInfo(input);
-->


</script>
</head>
<body>
</body>

Answer 2

只有第一个有效，因为它会停在第一个项目上，而您正在使用 == 比较字符串（得到）和数字（数组中的值），所以它会起作用。

在其他情况下，由于类型检查 (===)，它会落入 else if 语句，并且您有一个 ;紧接在条件之后，因此始终会调用警报。

如果你必须使用 for 循环来做，如果你有一个像 hasFound 这样的标签会更好，它会像这样：

function flightInfo(got) {
        let nGot = Number(got);
        let hasFound = false;
        for (i = 0; i < 8; i++) {
          if (nGot === flightNumber[i]) {
            hasFound = true;
            break;
          }
        }
        if (!hasFound) {
          alert(
            "The flight number you have entered is invalid. Please refresh page and try again."
          );
          return;
        }
    // ... the rest of the code

但您可以使用其他 Array 方法，例如 .findIndexOf or .includes

另一个提示： - 你应该总是声明变量 - 尝试始终使用 === 或 !== 而不是 != 或 == （两者之间的区别在于第一个 (=== / !==) 也比较类型，而另一个尝试转换它在旅途中） - 识别事物！

JavaScript/HTML 不显示现有数组

JavaScript/HTML not display existing Array

html

javascript

arrays

alert