更改document.getElementById时Ajax不起作用
[英]Ajax doesn't work when I change document.getElementById
问题描述
I have the following code which I found at W3Schools and when I use document.getElementById it works, when I change this to document.getElementsByClassName (on my full code, I will have more than <p class="txthint"> why I thought I should be using documents.getElementsByClassName ) it just stops working. 
我有以下代码，这些代码是我在W3Schools上找到的，当我使用document.getElementById它可以工作，当我将其更改为document.getElementsByClassName （在我的完整代码中，我将不只是<p class="txthint">我应该使用documents.getElementsByClassName ），它只是停止工作。
<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!--#include file="Connections/PSCRM.asp" -->
<%
Dim Recordset1
Dim Recordset1_cmd
Dim Recordset1_numRows
Set Recordset1_cmd = Server.CreateObject ("ADODB.Command")
Recordset1_cmd.ActiveConnection = MM_PSCRM_STRING
Recordset1_cmd.CommandText = "SELECT prodref FROM dba.proditem where created >= '2015-08-01' and obsolete = '0' ORDER BY prodref asc"
Recordset1_cmd.Prepared = true
Set Recordset1 = Recordset1_cmd.Execute
Recordset1_numRows = 0
%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form action="">
<input type="text" onChange="showCustomer(this.value)" value="">
</form>
<br>
<div class="txtHint">Customer info will be listed here...</div>
<script>
function showCustomer(str) {
var xhttp;
if (str == "") {
document.getElementsByClassName("txtHint").innerHTML = "";
return;
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementsByClassName("txtHint").innerHTML = xhttp.responseText;
}
}
xhttp.open("GET", "data.asp?prodref="+str, true);
xhttp.send();
}
</script>
</body>
</html>
<%
Recordset1.Close()
Set Recordset1 = Nothing
%>
2 个解决方案
解决方案1
3 2015-11-06 17:09:43
getElementsByClassName returns a collection of nodes, not a single node. getElementsByClassName返回节点的集合，而不是单个节点。 You need to iterate that collection and set the innerHTML property on each node: 您需要迭代该集合并在每个节点上设置innerHTML属性：
var nodes = document.getElementsByClassName("txtHint");
for (var i = 0; i < nodes.length; i++)
nodes[i].innerHTML = '';
Your current code is setting the property on the collection itself which, as it's perfectly valid JavaScript, doesn't error, but causes nothing to update either - it's just now the node collection has an unused innerHTML property. 您当前的代码是在集合本身上设置属性，因为它是完全有效的JavaScript，不会出错，但是也不会导致任何更新-只是现在节点集合具有未使用的innerHTML属性。
解决方案2
1 已采纳 2015-11-06 17:12:26
If you look at the documentation for getElementsByClassName , you'll notice that you are returning an array of object whereas getElementById returns a single element. 如果查看getElementsByClassName的文档，则会注意到您正在返回一个对象数组，而getElementById返回一个元素。
With the array, there is no prototype for innerHtml, this is only exposed on a single element. 对于数组，innerHtml没有原型，它仅在单个元素上公开。
What you will need to do is iterate through the list of elements you retrieve from the getElementsByClassName. 您需要做的是遍历从getElementsByClassName中检索到的元素列表。
var elements =document.getElementsByClassName("txtHint");
for(var i = 0; i < elements.length; i++){
elements[i].innerHTML = xhttp.responseText
};
Try that and see if it helps 试试看，看看是否有帮助
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.