网页Javascript在我添加其他功能时停止工作
[英]Webpage Javascript stops working when I add another function
问题描述
I'm writing a simple webpage for an assignment that requires I make a form that autopopulates if the ID number entered has a match in an external XML document. 
我正在为一个作业编写一个简单的网页，要求我创建一个表单，如果输入的ID号在外部XML文档中匹配，则自动填充。 All was working fine until I started to add another function to execute on submission that will either add or modify a record (through an AJAX call). 一切正常，直到我开始在提交时添加另一个函数来添加或修改记录（通过AJAX调用）。
However, after adding this new function, the other one stopped working. 但是，添加这个新功能后，另一个停止工作。 If I comment it out, the original function works again. 如果我将其评论出来，原始功能将再次起作用。
I can't find any issues with this new function (ie all the brackets are in the right place etc). 我找不到这个新功能的任何问题（即所有括号都在正确的位置等）。 Why is it ruining everything? 它为什么毁了一切？
Here is my code: 这是我的代码：
<!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>
2 个解决方案
解决方案1
2 2013-04-15 16:16:29
You say all the brackets are in the right place, but they are not. 你说所有的括号都在正确的位置，但它们不是。
You're not closing 你还没关门
if (xhr.readyState == 4 && xhr.status == 200){
In your last function 在你的最后一个功能
解决方案2
1 已采纳 2013-04-15 16:20:15
By running your code in jsfiddle here you can see in the debugger that you are missing a } 通过的jsfiddle运行代码在这里 ，你可以在你缺少一个}调试器看到
In the console you get Error = SyntaxError: missing } after function body. 在控制台中，您在函数体后得到Error = SyntaxError：missing}。
So by looking through your code your simply missing a } at the end see http://jsfiddle.net/3QNHf/1/ 因此，通过查看您的代码，您最终会在最后看到http://jsfiddle.net/3QNHf/1/
I have also wrapped up some of your if statements, its better practice and easier to debug to use 我还包括了一些你的if语句，它更好的实践，更容易调试使用
if(statement){ do somthing}
rather than 而不是
if(statement)do something
Full Code 完整代码
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();
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.