js为什么按钮中的onclick事件不触发，按了没有反应
<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title></head...
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 显示评论列表 -->
<table width="600" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bordercolorlight="#666666" bordercolordark="#FFFFFF" id="comment">
<tr>
<td width="18%" height="27" align="center" bgcolor="#E5BB93">评论人</td>
<td width="82%" align="center" bgcolor="#E5BB93">评论内容</td>
</tr>
</table>
<!-- 收集评论信息的表单及表单元素 -->
<form name="form1" method="post" action="">
评论人： <input type="text" name="person" id="person" size="40"><br><br>
评论内容： <textarea name="content" cols="60" rows="6" id="content"></textarea>
</form>
<!-- js函数 -->
<script type="text/javascript">
//在评论列表中添加一条评论消息
function addElement(){
var person = Document.createTextNode(form1.person.value);//创建代表评论人的textNode节点
var content = Document.createTextNode(form1.content.value);//创建代表评论内容的textNode节点
//创建td类型的element节点
var td_person = Document.creatElement("td");
var td_content = Document.creatElement("td");
var tr = Document.creatElement("tr");//创建一个tr类型的element节点
var tbody = Document.creatElement("tbody");//创建一个tbody类型的element节点
//将textNode节点添加到td类型的节点中
td_person.appendChild(td_person);
td_content.appendChild(td_content);
//将td类型的节点添加到tr节点中
tr.appendChild(td_person);
tr.appendChild(td_content);
tbody.appendChild(tr);//将tr节点加入tbody中
var tComment = Document.getElementById("comment");//获取table对象
tComment.appendChild(tbody);//将节点tbody加入节点尾部
//清空评论人，评论内容文本框
form1.person.value = "";
form1.content.value = "";
//将评论列表中的第一条评论信息删除
function deleteFirstE(){
var tComment = Document.getElementById("comment");//获取table对象
if (tComment.rows.length > 1) {
tComment.deleteRow(1);//删除表格的第二行，即第一条评论
}
}
//将评论列表中的最后一条评论信息删除
function deleteLastE(){
var tComment = Document.getElementById("comment");//获取table对象
if (tComment.rows.length > 1) {
tComment.deleteRow(tComment.rows.length - 1);//删除表格的最后一行，即最后一条评论
}
}
}
</script>
<!-- 添加重置，发表，删除第一条评论，删除最后一条评论按钮，并在onclick事件中调用函数 -->
<input type="button" name="button" class="btn_grey" value="发表" onclick="addElement()">
<input type="reset" name="Reset" class="btn_grey" value="重置" >
<input type="button" name="button" class="btn_grey" value="删除第一条评论" onclick="deleteFirstE()">
<input type="button" name="button" class="btn_grey" value="删除最后一条评论" onclick="deleteLastE()">
</body>
</html> 展开
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 显示评论列表 -->
<table width="600" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" bordercolorlight="#666666" bordercolordark="#FFFFFF" id="comment">
<tr>
<td width="18%" height="27" align="center" bgcolor="#E5BB93">评论人</td>
<td width="82%" align="center" bgcolor="#E5BB93">评论内容</td>
</tr>
</table>
<!-- 收集评论信息的表单及表单元素 -->
<form name="form1" method="post" action="">
评论人： <input type="text" name="person" id="person" size="40"><br><br>
评论内容： <textarea name="content" cols="60" rows="6" id="content"></textarea>
</form>
<!-- js函数 -->
<script type="text/javascript">
//在评论列表中添加一条评论消息
function addElement(){
var person = Document.createTextNode(form1.person.value);//创建代表评论人的textNode节点
var content = Document.createTextNode(form1.content.value);//创建代表评论内容的textNode节点
//创建td类型的element节点
var td_person = Document.creatElement("td");
var td_content = Document.creatElement("td");
var tr = Document.creatElement("tr");//创建一个tr类型的element节点
var tbody = Document.creatElement("tbody");//创建一个tbody类型的element节点
//将textNode节点添加到td类型的节点中
td_person.appendChild(td_person);
td_content.appendChild(td_content);
//将td类型的节点添加到tr节点中
tr.appendChild(td_person);
tr.appendChild(td_content);
tbody.appendChild(tr);//将tr节点加入tbody中
var tComment = Document.getElementById("comment");//获取table对象
tComment.appendChild(tbody);//将节点tbody加入节点尾部
//清空评论人，评论内容文本框
form1.person.value = "";
form1.content.value = "";
//将评论列表中的第一条评论信息删除
function deleteFirstE(){
var tComment = Document.getElementById("comment");//获取table对象
if (tComment.rows.length > 1) {
tComment.deleteRow(1);//删除表格的第二行，即第一条评论
}
}
//将评论列表中的最后一条评论信息删除
function deleteLastE(){
var tComment = Document.getElementById("comment");//获取table对象
if (tComment.rows.length > 1) {
tComment.deleteRow(tComment.rows.length - 1);//删除表格的最后一行，即最后一条评论
}
}
}
</script>
<!-- 添加重置，发表，删除第一条评论，删除最后一条评论按钮，并在onclick事件中调用函数 -->
<input type="button" name="button" class="btn_grey" value="发表" onclick="addElement()">
<input type="reset" name="Reset" class="btn_grey" value="重置" >
<input type="button" name="button" class="btn_grey" value="删除第一条评论" onclick="deleteFirstE()">
<input type="button" name="button" class="btn_grey" value="删除最后一条评论" onclick="deleteLastE()">
</body>
</html> 展开
1个回答
展开全部
首先，把代码中的所有Document都改为document，请注意大小写！！！js中只有document对象，并不存在Document对象！这不是你觉得大写好看就能随便改的！
其次，把所有creatElement改成createElement，这种漏写字母的错误其实仔细检查一下就能发现的。
最后，把 td_person.appendChild(td_person); 改为 td_person.appendChild(person); 把 td_content.appendChild(td_content); 改为 td_content.appendChild(content); 就完全OK了！
其次，把所有creatElement改成createElement，这种漏写字母的错误其实仔细检查一下就能发现的。
最后，把 td_person.appendChild(td_person); 改为 td_person.appendChild(person); 把 td_content.appendChild(td_content); 改为 td_content.appendChild(content); 就完全OK了！
已赞过
已踩过<
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
