Невозможно установить значение свойства null on onchange

Question

Я хочу отобразить информацию о рейсе рейса в зависимости от выбранного номера рейса. Я показываю выпадающее меню, в котором отображаются все номера рейсов и таблица, в которой отображаются детали всех рейсов, таких как номер терминала, авиакомпания и дата. Когда выбран номер рейса, он должен показывать только данные для этого номера рейса, используя onchange. Я получаю сообщение об ошибке «Uncaught TypeError: Не могу прочитать значение свойства« null » at getAjaxData (liveArrivalsNode.js: 35) at init (liveArrivalsNode.js: 10) at window.onload (liveArrivalsNode.js: 5) ».

Я не уверен, верно ли мое утверждение if else. Как мне это сделать? Любая помощь приветствуется, спасибо.

liveArrivalsNode.js

var xmlhttp; 

window.onload=function(){ 
    init(); 
} 

function init(){    
    getAjaxData(); 
    getJsonData(); 
    setInterval(getAjaxData, 5000); 

    document.getElementById("flights").onchange=function(){ 
     getAjaxData(); 
    } 
} 

function getAjaxData() { 
    if (window.XMLHttpRequest) 
     xmlhttp=new XMLHttpRequest(); 
    else 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 

    xmlhttp.onreadystatechange=function(){ 
     showAjaxData(); 
    }; 

    var myFlight = document.getElementById("flightDDown").value; 

    if(myFlight == 'All') 
     xmlhttp.open("GET","http://localhost:3000/arrivals/",true); 
    else if(myFlight == null) 
     xmlhttp.open("GET","http://localhost:3000/arrivals/",true); 
    else 
xmlhttp.open("GET","http://localhost:3000/arrivals/flights/"+myFlight,true); 

    xmlhttp.send(); 
} 

function showAjaxData() 
{ 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    {  
     var data = JSON.parse(xmlhttp.responseText); 

     var output ="<table border=1>"; 
     output += "<tr><th></th><th>Origin</th><th>Airline</th><th>Flight</th><th>Scheduled Date</th><th>Scheduled Time</th><th>Status</th>"; 
     for(var i=0;i<data.arrivals.length;i++) 
     { 
      var terminal; 
      if(data.arrivals[i].terminal == "t1") 
       terminal = "<img src='images/t1.jpg'/>"; 
      else 
       terminal = "<img src='images/t2.jpg'/>"; 

      output += '<tr>'; 
      if(data.arrivals[i].highlight == 'on') 
       output += "<tr class='highlight'>"; 
      else 
       output += "<tr class='normal'>"; 

      output += '<td>'+terminal+'</td><td>'+data.arrivals[i].origin+'</td><td>'+data.arrivals[i].airline+'</td><td>'+data.arrivals[i].flight+'</td><td>'+data.arrivals[i].scheduledDate+'</td><td>'+data.arrivals[i].scheduledTime+'</td><td>'+data.arrivals[i].status+ '<input type=\'hidden\' name=\'highlight\' value=\'data.arrivals[i].highlight\'></td></tr>'; 
     } 
     output+="</table>"; 

     // add output to "fixtures" div 
     document.getElementById("myFlights").innerHTML=output; 
    } 
} 



function getJsonData() { 
    if (window.XMLHttpRequest) 
     xmlhttpSecond=new XMLHttpRequest(); 
    else 
     xmlhttpSecond=new ActiveXObject("Microsoft.XMLHTTP"); 

    xmlhttpSecond.onreadystatechange=function(){ 
     showJsonData(); 
}; 

// var myFlight = document.getElementById("flights").value; 
xmlhttpSecond.open("GET","http://localhost:3000/arrivals/flights",true); 

xmlhttpSecond.send(); 
} 

function showJsonData() 
{ 
    if (xmlhttpSecond.readyState==4 && xmlhttpSecond.status==200) 
    {  
     var data = JSON.parse(xmlhttpSecond.responseText); 

     // var today = date('Y-m-d'); 
     // today = today.getFullYear() +"-"+(today.getMonth() + 1)+"-"+today.getDay(); 
     var flightDetails = "<form method='GET' action='index.js'>"; 
     flightDetails += "Filter by Flight No.: " 
     flightDetails += "<select id='flightDDown' name='flight'>"; 
     flightDetails += "<option value='All'>Any</option>"; 
     for(var i=0;i<data.flights.length;i++) 
     { 
      flightDetails += "<option value="+data.flights[i].flight+">"+data.flights[i].flight+"</option>"; 
     } 
     flightDetails+="</select></form>"; 

     // add output to "fixtures" div 
     document.getElementById("flightDropdown").innerHTML=flightDetails; 
    } 
} 

liveArrivalsNode.php

<html> 
<head> 
<link rel="stylesheet" href="colour.css"> 
    <script src="liveArrivalsNode.js" type="text/javascript"></script> 
</head> 

<body> 
<?php 
require 'airportArrivals.html'; 
?> 
<div id="flightDropdown"></div> 

<div id="myFlights"></div> 
</body> 
<footer> 
<caption align="bottom"><hr/><center>L00091898 
</footer> 
</html> 

Answer 1

ошибка вы получаете, потому что вы пытаетесь прочитать свойство из объекта со значением null.

Из рабочего процесса кажется, что это вызвано попыткой прочитать значение не существующего элемента в вашей функции getAjaxData(). Где вы читали значение, которое вы можете изменить его к следующему

var myFlight = document.getElementById("flightDDown"); 

и Simultaniously изменить, если заявление, чтобы сначала проверить, если это нуль или если оно выбрано значение равно 'All' (если это нуль, он не будет проверять выбранное значение, и поскольку вы используете тот же URL-адрес, это не должно быть проблемой)

if(myFlight == null || myFlight.value === 'All') 
    xmlhttp.open("GET","http://localhost:3000/arrivals/",true); 
else 
    xmlhttp.open("GET","http://localhost:3000/arrivals/flights/"+myFlight.value,true);