Problem in executing the complete javascript-CodePudding

The program is not running and just showing blank window when opened in browser. Please help me found the issue with the code why it is not executing You need to create a program that will display flight information to a person. The program will continue to provide information to the user until they indicate that they are no longer interested in searching (they will enter Q or X to stop). The user will be prompted to enter a city to search for and you will look for any flight that starts in this city and display the information associated with that flight.

//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>

CodePudding user response：

Looks like you forgot the quote in your array with string and numbers combined in the following line:

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

Shouldn't it look like this:

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

CodePudding user response：

Consider the following.

/*
//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>

Instead of using multiple unique Arrays, you may want to use an Array of Objects. This will help create a relationship between the various elements. Once you have identified the one object you need, you can easily access all the other related details.

Based on your code, you are asking the User to enter a City name, yet this is not explained well in your Prompt. You should consider clarifying the prompt better or using another Input method.

Once we have the User input, we can use the function to seek out the proper object, if we do not find it, false is returned. You have no feedback to the User if the Flight cannot be found. You might consider that scenario further.