執行完整javascript的問題-有解無憂

該程式未運行，在瀏覽器中打開時僅顯示空白視窗。請幫我找到代碼為什么不執行的問題您需要創建一個程式來向一個人顯示航班資訊。程式將繼續向用戶提供資訊，直到他們表示不再對搜索感興趣（他們將輸入 Q 或 X 停止）。系統將提示用戶輸入要搜索的城市，您將查找從該城市開始的任何航班并顯示與該航班相關的資訊。

//declare the arrays
startCity = ["Atlanta", " Cleveland", " Indianapolis", "Louisville"];
endcity = ["Cleveland", "Indianapolis", "Louisville ", "Atlanta"];
flightNumber = [RE103, RE305, RE307, RE309];
pricePerPerson = [110, 75, 90, 120];

//window onl oad method
window.onload = (function() {
  //call function to prompt user
  processPromtExecution();

  //prmpt user to ask input
  function processPromtExecution() {
    //ask user to privide imput
    var inputString = prompt("Looking for a flight? Enter the title or X to quit", "");

    //check user input and if inpt is Q/q/X/x the quti with message
    if (inputString == "Q" || inputString == "X" || inputString == "x" || inputString == "q") {
      $("#idSpan").append("<hr /> <br />");
      $("#idSpan").append("Thank you for using our flights system.");
    } else {
      //else search the input
      for (var i = 0; i < startCity.length; i  ) {

        //chck input strin is part of array of book titles element or not
        if (startCity[i].toLowerCase().indexOf(inputString.toLowerCase()) >= 0) {

          //if matches then fetch index of other arrays
          var startCity = startCity[i];
          var endCity = endCity[i];
          var flightNumber = flightNumber[i];
          var pricePerPerson = pricePerPerson[i];

          //print the message below
          document.getElementById("idSpan").style.display = "block";
          $("#idSpan").append("<hr />");

          //set the values
          $("#idSpan").append("flight Information: <br />");
          $("#idSpan").append("starta: "   startCity   "<br />");
          $("#idSpan").append("endCity: "   endCity   "<br />");
          $("#idSpan").append("Number: "   flightNumber   "<br />");
          $("#idSpan").append("Cost: "   pricePerPerson   "<br />");

          //ask again
          processPromtExecution();
        }
      }
    }
  }

});

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <span id="idSpan" style="display:none;">Welcome to the Javascript flightS</span>

</body>

</html>

uj5u.com熱心網友回復：

看起來您忘記了陣列中的引號，字串和數字組合在以下行中：

flightNumber = [RE103, RE305, RE307, RE309];

不應該是這樣的：

flightNumber = ["RE103", "RE305", "RE307", "RE309"];

uj5u.com熱心網友回復：

考慮以下。

/*
//declare the arrays
startCity = ["Atlanta", " Cleveland", " Indianapolis", "Louisville"];
endcity = ["Cleveland", "Indianapolis", "Louisville ", "Atlanta"];
flightNumber = ["RE103", "RE305", "RE307", "RE309"];
pricePerPerson = [110, 75, 90, 120];
*/

// Prepare data
var flights = [{
  flightNumber: "RE103",
  city: {
    start: "Atlanta",
    finish: "Cleveland"
  },
  pricePerPerson: 110
}, {
  flightNumber: "RE305",
  city: {
    start: "Cleveland",
    finish: "Indianapolis"
  },
  pricePerPerson: 75
}, {
  flightNumber: "RE307",
  city: {
    start: "Indianapolis",
    finish: "Louisville"
  },
  pricePerPerson: 90
}, {
  flightNumber: "RE309",
  city: {
    start: "Louisville",
    finish: "Atlanta"
  },
  pricePerPerson: 120
}];

$(function() {

  // Define Functions
  function getFlightDataByNumber(flightNumber, flightData) {
    var results = false;
    $.each(flightData, function(index, flight) {
      if (flight.flightNumber.toLowerCase() == flightNumber.toLowerCase()) {
        results = flight;
      }
    });
    return results;
  }

  function getFlightDataByStart(cityName, flightData) {
    var results = false;
    $.each(flightData, function(index, flight) {
      if (flight.city.start.toLowerCase() == cityName.toLowerCase()) {
        results = flight;
      }
    });
    return results;
  }

  function promptForFlight() {
    var inputString = prompt("Looking for a flight? Enter the title or X to quit", "");
    if (inputString == "Q" || inputString == "X" || inputString == "x" || inputString == "q") {
      $("#idSpan").append("<hr /> <br />");
      $("#idSpan").append("Thank you for using our flights system.");
    } else {
      var myFlight = getFlightDataByStart(inputString, flights);
      if (myFlight !== false) {
        $("#idSpan").show();
        $("<ul>", {
          class: "flightData"
        }).insertAfter("#idSpan");
        $("<li>").html("<label>Flight Information:</label>").appendTo(".flightData");
        $("<li>").html("<label class='fixed'>Departs:</label>"   myFlight.city.start).appendTo(".flightData");
        $("<li>").html("<label class='fixed'>Arrives:</label>"   myFlight.city.finish).appendTo(".flightData");
        $("<li>").html("<label class='fixed'>Number:</label>"   myFlight.flightNumber).appendTo(".flightData");
        $("<li>").html("<label class='fixed'>Cost:</label>$"   myFlight.pricePerPerson.toFixed(2)).appendTo(".flightData");
      }
    }
  }

  // Run Code
  promptForFlight();
});

/*
//window onl oad method
window.onload = (function() {
  //call function to prompt user
  processPromtExecution();

  //prmpt user to ask input
  function processPromtExecution() {
    //ask user to privide imput
    var inputString = prompt("Looking for a flight? Enter the title or X to quit", "");

    //check user input and if inpt is Q/q/X/x the quti with message
    if (inputString == "Q" || inputString == "X" || inputString == "x" || inputString == "q") {
      $("#idSpan").append("<hr /> <br />");
      $("#idSpan").append("Thank you for using our flights system.");
    } else {
      //else search the input
      for (var i = 0; i < startCity.length; i  ) {

        //chck input strin is part of array of book titles element or not
        if (startCity[i].toLowerCase().indexOf(inputString.toLowerCase()) >= 0) {

          //if matches then fetch index of other arrays
          var startCity = startCity[i];
          var endCity = endCity[i];
          var flightNumber = flightNumber[i];
          var pricePerPerson = pricePerPerson[i];

          //print the message below
          document.getElementById("idSpan").style.display = "block";
          $("#idSpan").append("<hr />");

          //set the values
          $("#idSpan").append("flight Information: <br />");
          $("#idSpan").append("starta: "   startCity   "<br />");
          $("#idSpan").append("endCity: "   endCity   "<br />");
          $("#idSpan").append("Number: "   flightNumber   "<br />");
          $("#idSpan").append("Cost: "   pricePerPerson   "<br />");

          //ask again
          processPromtExecution();
        }
      }
    }
  }

});
*/

.flightData {
  margin: 0;
  padding: 0;
  list-style: none;
}

.flightData li label {
  font-weight: bold;
  display: inline-block;
}

.flightData li label.fixed {
  width: 120px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="idSpan" style="display:none;">Welcome to the Javascript flightS</span>

您可能想要使用物件陣列，而不是使用多個唯一的陣列。這將有助于在各種元素之間建立關系。一旦確定了您需要的一個物件，您就可以輕松訪問所有其他相關詳細資訊。

根據您的代碼，您要求用戶輸入城市名稱，但這在您的提示中沒有得到很好的解釋。您應該考慮更好地闡明提示或使用其他輸入法。

一旦我們有了用戶輸入，我們就可以使用該函式尋找合適的物件，如果沒有找到，false則回傳。如果無法找到航班，您沒有任何反饋給用戶。您可能會進一步考慮這種情況。

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/377289.html

標籤：javascript html 查询

上一篇：Jquery在同一頁面中隱藏和顯示多個元素

下一篇：如何在JQuery中將嵌套的span替換為div元素？