Question

我想根据所选的航班号显示航班的航班详情。我正在显示一个显示所有航班号的下拉菜单和一个显示所有航班详情的表格，例如航站楼号码，航空公司和日期。选择航班号后，它应仅使用onchange显示该航班号的详细信息。我收到错误“Uncaught TypeError：无法读取属性'值'的null at getAjaxData（liveArrivalsNode.js：35）在init（liveArrivalsNode.js：10）在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");

并同时更改if语句，首先检查它是否为null或者它的选择值是否等于'All'（如果它为null，它将不会检查所选值，因为你使用相同的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);

无法在onchange上设置null的属性值

1 个答案: