onchangeのプロパティ値nullを設定できません

-2

選択したフライト番号に応じて、フライトのフライト情報を表示します。すべてのフライト番号を表示するドロップダウンメニューと、ターミナル番号、航空会社、日付などのすべてのフライトの詳細を表示するテーブルを表示しています。フライト番号が選択されている場合、そのフライト番号の詳細はonchangeを使用してのみ表示されます。私は「キャッチされない例外TypeErrorエラーを取得しています：getAjaxData（liveArrivalsNode.js：35）のヌルのプロパティ '値が' 読み取りできないのinitでを（liveArrivalsNode.js：10）window.onloadで（liveArrivalsNode.js：5） "onchangeのプロパティ値nullを設定できません

if else文が正しいかどうかわかりません。これをどうやって稼働させるのですか？どんな助けもありがとう、ありがとう。あなたが値nullを持つオブジェクトからプロパティを読み取ろうとしているので、あなたが取得している

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>

出典

2016-12-18 GleneaMan

エラーが発生した行はありませんか？最初にエラーが出るのですか、何かを選択したときだけエラーが出ますか？最初はHTMLのように見えますか？ –

その時点で要素が存在することを確認せずに 'flightDDown'要素の値を読み取ろうとしているのではないでしょうか？あなたのワークフローからは、 'init（）'が最初に呼び出され、次に 'getAjaxData（）'が呼び出され、これは 'showAjaxData（）に到達した後に作成するように見える' flightDDown'コンボボックスの値を読み取ろうとします） ' – Icepickle

この' document.getElementById（ "flightDDown"）の呼び出しは 'showJsonData（）'関数の前に（idが 'flightDDown'の要素が文書に追加される前に）実行されるというのが問題だと思います。 – Titus

エラーです。

これは、getAjaxData()関数内に存在しない要素の値を読み取ろうとしたことによるものと思われます。あなたが値を読み取る場合は、それがnullだか、それが選択されている場合、値は（それがnullだ場合、それはチェックしません'All'に等しい場合は、最初のチェックには、以下の

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

に変更し、simultaniously if文を変更することができますあなたが同じ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);

出典

2016-12-18 13:16:53 Icepickle

ありがとうございます。私は今、 – GleneaMan

のおかげでエラーになっています。 "Uncaught TypeError：window.onload（liveArrivalsNode.js：5）でinit（liveArrivalsNode.js：12）でnullのプロパティ 'onchange'を設定できません"というエラーが表示されます。どのようにこれを修正するための任意の提案？ – GleneaMan

@GleneaMan同じ原則では、まだ存在しない要素を取得しようとしているとき、イベントハンドラを 'null 'に評価されるオブジェクトの' onchange'メソッドにバインドしようとします – Icepickle

onchangeのプロパティ値nullを設定できません

答えて

関連する問題