2017-08-08 14 views
0

私はチャートを作成するDropboxを作成しています。私は、コンボボックスからテキスト値を取得するために関数change()を使用しています。コンボボックスのjavascriptコードの何が間違っていますか?

\t \t 
 
\t \t //Load the Visualization API and the chart package. 
 
\t \t google.charts.load('current', {'packages':['corechart']}); 
 
\t \t //google.load('visualization', '1', {'packages':['corechart','table']}); 
 

 
\t \t //get the selected value 
 
\t \t function change() { 
 
\t \t \t var listbox = document.getElementById("chart"); 
 
\t \t \t var selIndex = listbox.seletedIndex; 
 
\t \t \t var selValue = listbox.options[selIndex].value; 
 
\t \t \t var selText = listbox.options[selIndex].text; 
 
\t \t \t 
 
\t \t \t //console.log(selValue); 
 
\t \t 
 

 
\t \t //chart for apply job post 
 
\t \t google.charts.setOnLoadCallback(dashboardDraw); 
 

 
\t \t function dashboardDraw(x, y){ 
 

 
\t \t \t //get the location data from table 
 
\t \t \t var jsonLocationData = $.ajax({ 
 
\t \t \t \t \t url: "post_location.php", 
 
\t \t \t \t \t data: '{}', 
 
\t \t \t \t \t dataType: "json", 
 
\t \t \t \t \t async: false 
 
\t \t \t \t \t }).responseText; 
 

 
\t \t \t //create our data table out of json data loaded from server 
 
\t \t \t var LocationData = new google.visualization.DataTable(jsonLocationData); 
 

 
\t \t \t //get the company data from table 
 
\t \t \t var jsonCompanyData = $.ajax({ 
 
\t \t \t \t \t url: "post_company.php", 
 
\t \t \t \t \t data: '{}', 
 
\t \t \t \t \t dataType: "json", 
 
\t \t \t \t \t async: false 
 
\t \t \t \t \t }).responseText; 
 

 
\t \t \t //create our data table out of json data loaded from server 
 
\t \t \t var CompanyData = new google.visualization.DataTable(jsonCompanyData); 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t //company chart details 
 
\t \t \t var optionsLocation = { 
 
     \t \t \t title: 'Job Posts by Location', 
 
     \t \t \t pieSliceText: 'label', 
 
     \t \t \t tooltip: {isHtml: true}, 
 
     \t \t \t width: 700, 
 
     \t \t \t height: 500, 
 
     \t \t \t chartArea: { left:"5%",top:"5%",width:"90%",height:"90%" } 
 
     \t \t }; 
 
\t \t \t 
 

 
     \t \t //company chart details 
 
     \t \t var optionsCompany = { 
 
     \t \t \t title: 'Job Posts by Company', 
 
     \t \t \t pieSliceText: 'label', 
 
     \t \t \t tooltip: {isHtml: true}, 
 
     \t \t \t width: 700, 
 
     \t \t \t height: 500, 
 
     \t \t \t chartArea: { left:"5%",top:"5%",width:"90%",height:"90%" } 
 
     \t \t }; 
 
\t \t \t 
 
     \t \t var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
 
     \t \t \t if (selValue == 'location_val') { 
 
     \t \t \t x = LocationData; 
 
     \t \t \t y = optionsLocation; 
 
     \t \t \t } 
 
     
 
     \t \t \t if (selValue == 'company_val') { 
 
     \t \t \t x = CompanyData; 
 
     \t \t \t \t y = optionsCompany; 
 
     \t \t \t } 
 
     
 
     \t chart.draw(x, y); 
 
    \t } 
 
    \t \t 
 
     
 

 
    \t \t \t \t 
 
\t } \t
\t <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
 
\t <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 

 

 
    
 

 

 
<table> 
 
    <th> 
 
     <select id="chart" name="select1" onchange="change()"> 
 
     \t <option selected disabled="select">Select</option> 
 
     \t <option value="company_val">By Company</option> 
 
     \t <option value="location_val">By Location</option> 
 
     </select> 
 
    </th> 
 
</table> 
 
    <div id="chart_div"></div>

コンソールには、次のエラーを示しています:

TypeError: listbox.options[selIndex] is undefined[Learn More] dashboard.php:25:8

コードの問題の一部がこれです:

var selValue = listbox.options[selIndex].value; 
    var selText = listbox.options[selIndex].text; 

どのようにすることができますこれはコードです私はこの問題を解決する?私はコードをチェックしており、構文上の問題はありません。

+0

'selIndex'が実際にどのような値を含んでいるかチェックしましたか? – CBroe

+0

値は定義されていません – joun

答えて

1

まだデバッガを使用してみましたか?

ブラウザに組み込まれているデバッグツールを使用して、エラーが発生する行の直前にブレークポイントを設定した場合、selIndexは未定義です。だから、あなたはその値を割り当てる行を見るでしょう。

var selIndex = listbox.seletedIndex; 

あなたのエラーは、selectedIndexノートc含むリストボックスで利用可能なプロパティを見ることができ、あなたのデバッガを使用して、その行です。

+0

mozilaデバッガコンソールを使用しており、上記のエラーを表示します – joun

+0

彼は 'seletedIndex'を' selectedIndex'に変更することを意味します – ewwink

+0

owh..thank。時には私たち自身のコードをチェックするときに、間違った型付きコードではあるが問題は見られないのが普通です。 – joun

関連する問題