2016-03-28 2 views
0

Я нахожусь в середине создания веб-страницы, которая ссылается на веб-службу, чтобы отобразить список имен магазинов. Я создал ссылку на веб-службу, и я создал функцию onclick под названием GetOrders. Я разместил его как на моей странице 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 Страница:

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

Как Marc B прокомментировал выше, это, вероятно, неуместны {, что вызывает проблему. В 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(); 
    } 
Смежные вопросы