當我添加其他功能時，網頁Javascript停止工作

我正在爲一項任務編寫一個簡單的網頁，該任務要求我在輸入的ID號碼與外部XML文檔中的匹配項匹配時自動填充表單。所有工作正常，直到我開始添加另一個函數來執行提交，將添加或修改記錄（通過AJAX調用）。當我添加其他功能時，網頁Javascript停止工作

但是，添加此新功能後，另一個停止工作。如果我將它註釋掉，原始函數再次運行。

我無法找到這個新功能的任何問題（即所有的括號都在正確的地方等）。爲什麼它毀了一切？

這裏是我的代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
     <script type="text/javaScript"> 
      function checkID(val){ 
       if (val.value.length != 6) //Since student ID's are six digits 
        return; 
       //inID = val.value; 
       //if (inID.length < 6) return; 

       xhr = new XMLHttpRequest(); 
       xhr.open('GET', 'processor.php?studentID=' + document.forms[0].elements[0].value); 
       xhr.onreadystatechange = function() { 
        /** 
        if (xhr.readystate != 4 || xhr.status != 200){ 
         document.getElementById("status").innerHTML = "<p> Not Done Yet</p>"; 
        } 
        **/ 
        if (xhr.readyState === 4 && xhr.status === 200){ 
         document.getElementById("status").innerHTML = ""; 
         parse(xhr.responseXML); 
        } 
       } 
       xhr.send(); 
       document.getElementById("status").innerHTML = "<p> Not Done Yet</p>"; 
      } 
      function parse(xml){ 
       if (xml == null) alert("Null!"); 
       var student = xml.getElementsByTagName('student'); 
        if (student.length == 0) alert("No Student's Found with that ID"); 
       var content = student.item('0'); 
        var name = content.getElementsByTagName('fullname'); 
        name = name.item(0).childNodes[0].nodeValue; 
        document.forms[0].elements[1].value = name; 

        var phone = content.getElementsByTagName('phone'); 
        phone = phone.item(0).childNodes[0].nodeValue; 
        document.forms[0].elements[2].value = phone; 

        var email = content.getElementsByTagName('email'); 
        email = email.item(0).childNodes[0].nodeValue; 
        document.forms[0].elements[3].value = email; 

      } 
      function addOrModify(curr){ 
       xhr = new XHRHttpRequest(); 
       xhr.open('GET', 'addOrModify.php?studentID=' + document.forms[0].elements[0].value); 
       xhr.onreadystatechange = function(){ 
        if (xhr.readyState == 4 && xhr.status == 200){ 
         if (xhr.responseText == "added") 
          document.getElementByID('status').innerHTML = "Added"; 
       } 
       xhr.send(); 
      } 

     </script> 
     <style type="text/css"> 
      #container { 
       margin: 0 auto; 
       padding: 30px; 
       text-align: center; 
      } 
      .centerp { 
       font-size: 150%; 
       text-align: center; 
      } 
      table { 
       align: center; 
      } 
     </style> 
     <title>Student Profile</title> 
    </head> 

    <body> 
     <p class="centerp"> Student Profiles </p> 
     <div id="container"> 
      <form method="GET" action=""> 
       <table align="center"> 
        <label> 
         <tr> 
          <td>Student ID</td> 
          <td><input type="text" name="studentID" onblur="checkID(this)"> </input></label></td> 
         </tr> 
        </label> 
        <label> 
         <tr> 
          <td>Name</td> 
          <td><input type="text" name="name" id="name"> </input></label></td> 
         </tr> 
        </label> 
        <label> 
         <tr> 
          <td>Phone</td> 
          <td><input type="text" name="phone"> </input></label></td> 
         </tr> 
        </label> 
        <label> 
         <tr> 
          <td>Email</td> 
          <td><input type="text" name="email"> </input></label></td> 
         </tr> 
        </label> 
         <tr> 
          <td> <input type="submit" onclick="addOrModify()"> </input></td></tr> </td> 
         </tr> 
         <tr> 
          <td> <div id="status"> 
           </div> </td> 
         </tr> 
       </table> 
      </form> 
     </div> 
    </body> 
</html>

來源

2013-04-15 CodyBugstein

使用調試器。 – SLaks

使用類似www.jslint.com的驗證你的語法 –

@SLaks什麼調試器？我正在使用Notepad ++ – CodyBugstein

通過運行中的jsfiddle here你的代碼，你可以在調試器中看到你缺少一個}

在控制檯在函數體之後得到 Error = SyntaxError：missing}。

所以通過代碼尋找你只是缺少一個}在年底看到http://jsfiddle.net/3QNHf/1/

我也結束了你的一些if語句，其更好的做法，更容易調試使用

if(statement){ do somthing}

而不是

if(statement)do something

全碼

function checkID(val){ 
     if (val.value.length != 6){ //Since student ID's are six digits 
      return;} 
       //inID = val.value; 
       //if (inID.length < 6) return; 

       xhr = new XMLHttpRequest(); 
       xhr.open('GET', 'processor.php?studentID=' + document.forms[0].elements[0].value); 
       xhr.onreadystatechange = function() { 
        /** 
        if (xhr.readystate != 4 || xhr.status != 200){ 
         document.getElementById("status").innerHTML = "<p> Not Done Yet</p>"; 
        } 
        **/ 
        if (xhr.readyState === 4 && xhr.status === 200){ 
         document.getElementById("status").innerHTML = ""; 
         parse(xhr.responseXML); 
        } 
       } 
       xhr.send(); 
       document.getElementById("status").innerHTML = "<p> Not Done Yet</p>"; 
      } 
      function parse(xml){ 
       if (xml == null){ alert("Null!")}; 
       var student = xml.getElementsByTagName('student'); 
       if (student.length == 0){ alert("No Student's Found with that ID")}; 
       var content = student.item('0'); 
        var name = content.getElementsByTagName('fullname'); 
        name = name.item(0).childNodes[0].nodeValue; 
        document.forms[0].elements[1].value = name; 

        var phone = content.getElementsByTagName('phone'); 
        phone = phone.item(0).childNodes[0].nodeValue; 
        document.forms[0].elements[2].value = phone; 

        var email = content.getElementsByTagName('email'); 
        email = email.item(0).childNodes[0].nodeValue; 
        document.forms[0].elements[3].value = email; 

      } 
      function addOrModify(curr){ 
       xhr = new XHRHttpRequest(); 
       xhr.open('GET', 'addOrModify.php?studentID=' + document.forms[0].elements[0].value); 
       xhr.onreadystatechange = function(){ 
        if (xhr.readyState == 4 && xhr.status == 200){ 
         if (xhr.responseText == "added") 
          document.getElementByID('status').innerHTML = "Added"; 
       } 
       xhr.send(); 
      } 
      }

來源

2013-04-15 16:20:15

這不會起作用，當readystate更改時，您正在發送xhr。但是，如果你不發送它，它不會改變。在代碼的最後添加一個括號不是正確的解決方案。 – Jochem261

你說所有的括號內是在正確的地方，但他們不是。

你不關閉

if (xhr.readyState == 4 && xhr.status == 200){

在您的最後一個函數

來源

2013-04-15 16:16:29 Jochem261

這就是爲什麼我喜歡括號垂直對齊而不是縮進。 –

唉我真的很笨！我經歷過多次，但沒有注意到！儘管如此，爲什麼會影響其他功能呢？一旦我調用這個函數，它不應該只會導致問題嗎？ – CodyBugstein

當我添加其他功能時，網頁Javascript停止工作

回答

相關問題