JavaScript / HTML не отображает существующий массив - PullRequest
Новая
       7

JavaScript / HTML не отображает существующий массив

0 голосов
/ 06 апреля 2020

Итак, мне поручили сделать небольшую информационную систему аэропорта. У меня все работает, но я столкнулся с одной проблемой. Когда я набираю один из 8 перечисленных рейсов, кроме рейса 356, у меня появляется окно с предупреждением. Я хочу, чтобы он запускался, чтобы пользователь мог без проблем ввести все 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>

Ответы [ 2 ]

0 голосов
/ 06 апреля 2020

Работает только первый, потому что он остановится на первом элементе, и вы сравниваете строку (полученный) с числом (значением в массиве), используя ==, чтобы он работал.

Вкл. другие это попадет в оператор else if из-за проверки типа (===) и у вас есть; сразу после условия, чтобы предупреждение всегда вызывалось.

Если для этого нужно использовать a для l oop, было бы лучше, если бы у вас был тег типа hasFound, он будет go как это: 

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 или .include

и другие советы: - вы всегда должны объявлять переменные - старайтесь всегда использовать === или! == вместо! = или == (разница между ними заключается в том, что первый (=== /! ==) сравнивает тип, а другой пытается преобразовать это на go) - идентичные вещи!

0 голосов
/ 06 апреля 2020

У вас есть проблема в этой части кода: 

//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 являются срабатывает сразу после того, как элемент не найден в первом if.

Во-вторых, даже если после else if не будет точки с запятой, else if будет вызываться сразу после проверки выше if для первого элемента, если он не был найден. Итак, как вы написали, for l oop всегда делает только одну итерацию, либо элемент найден, либо возвращается ошибка.

Вы можете исправить это следующим образом (не нужно 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
   // ...
}

Вместо для l oop вы можете использовать метод array.indexOf(), который находит первое вхождение элемента в массиве и возвращает индекс элемента в массиве или -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>
...