2016-03-28 5 views
0

私は、ストア名のリストを表示するためにWebサービスにリンクするWebページを作成する途中です。私はWebサービスへのリンクを作成し、GetOrdersというonclick関数を作成しました。 HTML5ページとJavaScriptページの両方に貼り付けて、リンクしています。しかし、アプリケーションを実行しようとすると何も起こりません。 Internet Explorerでデバッガツールを使用してコードを実行しましたが、ボタンがクリックされただけです。私が持っているJavaScriptコードは実行されていません。私のJavaScriptコードの唯一の部分は私のメニュー選択機能です。私のGetOrders関数が実行されていない理由を知ってもらえますか? 私のonclickが私のJavascriptにリンクしていないのはなぜですか?

マイHTML5ページ

<!DOCTYPE html> 

<html> 
<head> 
    <title>Adam Zeidan Assignment 4</title> 
    <link rel="stylesheet" type="text/css" href="styles/Assignment4.css" /> 
    <script src="js/Assignment4.js"></script> 


</head> 

<body> 
    <section id="title"> 
    <h1>Module 4 Demonstration</h1> 
     <hr> 
     <select onchange="MenuChoice()" id="menu"> 
      <option>Please select an option</option> 
      <option>Store List</option> 
      <option>Order History</option> 
     </select> 
     <hr> 
    </section> 
    <section id="section1" class="section1"> 
    <h2>This is section one!</h2> 
     <button onclick="GetOrders()" id="orders">Display Store List</button> 
     <br> 
     <br> 
     <label id="storelistdisplay">The store list will be displayed here. </label> 
    </section> 
    <section id="section2" class="section2"> 
    <h2>This is section two!</h2> 
    </section> 



</body> 
</html> 

マイJavaScriptのページ:マルク・Bは、上記のコメントのように

function MenuChoice() 
{ 
    { 
    if (document.getElementById("menu").value == "Store List") 
    { 
    document.getElementById("section1").style.visibility = "visible"; 
    document.getElementById("section2").style.visibility = "hidden"; 
    } 
    else if (document.getElementById("menu").value == "Order History") 
    { 
    document.getElementById("section1").style.visibility = "hidden"; 
    document.getElementById("section2").style.visibility = "visible"; 
    } 
    else 
    { 
    document.getElementById("section1").style.visibility = "hidden"; 
    document.getElementById("section2").style.visibility = "hidden"; 
    } 
} 

function GetOrders() 
    { 
     var objRequest = new XMLHttpRequest(); //Create AJAX request object 

     //Create URL and Query string 
     var url = "http://bus- pluto.ad.uab.edu/jsonwebservice/service1.svc/getAllStores/"; 
     url += document.getElementById("custid").value; 

     //Checks that the object has returned data 
     objRequest.onreadystatechange = function() 
      { 
       if (objRequest.readyState == 4 && objRequest.status == 200) 
       { 
        var output = JSON.parse(objRequest.responseText); 
        GenerateOutput(output); 
       } 
      } 
     //initiate server request 
     objRequest.open("GET", url, true); 
     objRequest.send(); 
    } 
} 
function GenerateOutput (result) 
{ 
    var count = 0; 
    var displaytext = ""; 

    //This loop will extract data from the data recieved from the server 
    for (count = 0; count < result.GetAllStoresResult.Length; count++) 
    { 
     displaytext = result.GetAllStoresResult[count].StoreID + ", " +  result.GetAllStoresResult[count].StoreName + ", " +  result.GetAllStoresResult[count].StoreCity + "<br>"; 
    } 

    document.getElementById("storelistdisplay").innerHTML = displaytext; 
} 
+2

URLには大きなスペースがあります。 404エラーが出ますか? –

+0

'MenuChoice()'関数に余分な '{'があります。これはおそらく構文エラーで、jsページ全体を強制終了します。 –

+0

URLコードに大きなスペースがありません。ここで私のコードをコピーしていたときには、エラーになっているに違いありません。私は404エラーを取得していない、と私は余分な{私が持っていたが、それは私のjsページ全体を殺した。 –

答えて

0

、それはおそらくあなたの問題を引き起こしている見当違い{です。 MenuChoice()の最初のif文は、if節の後ではなく、前の中括弧を前に開きます。

0

JSファイルに小さな誤字があり、GetOrders機能で余分な「}」が発生しました。私はそれを訂正した。以下のコードを使用してください。

function GetOrders() 
    { 
     var objRequest = new XMLHttpRequest(); //Create AJAX request object 

     //Create URL and Query string 
     var url = "http://bus- pluto.ad.uab.edu/jsonwebservice/service1.svc/getAllStores/"; 
     url += document.getElementById("custid").value; 

     //Checks that the object has returned data 
     objRequest.onreadystatechange = function() 
      { 
       if (objRequest.readyState == 4 && objRequest.status == 200) 
       { 
        var output = JSON.parse(objRequest.responseText); 
        GenerateOutput(output); 
       } 
      } 
     //initiate server request 
     objRequest.open("GET", url, true); 
     objRequest.send(); 
    } 
関連する問題