JavaScript 函数无法识别同一文档中的变量
javascript function can't recognize variable in same document
我需要一些基本的Javascript问题的方向。
我正在制作一个 ejs 页面来显示用户信息。
- 当我加载此页面时，我以数组形式获取"userList"数据。 然后我将它们放入 vUserList 数组中供将来使用。当调用函数"showUserInfo"时，我将信息放入文档中。
我有两个问题。
当我在同一标签中使用 for 循环和函数时，该函数根本不起作用。当我将 for 循环和函数拆分为不同的标签时，两者都有效，但函数无法识别虚拟用户列表数组。
如何让函数识别数组变量？
这是我的页面代码。
谢谢。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script>
var vUserList = new Array();
<% for (var i = 0; i < userList.length ; i++) { %>
vUserList[<%=i %>] = new Array();
vUserList[<%=i %>].googleUid = <%=userList[i].googleUid %>;
vUserList[<%=i %>].googleName = <%=userList[i].googleName %>;
vUserList[<%=i %>].memberUid = "<%=userList[i].memberUid %>";
vUserList[<%=i %>].clientVersion = <%=userList[i].clientVersion %>;
vUserList[<%=i %>].deviceId = <%=userList[i].deviceId %>;
vUserList[<%=i %>].ticket = <%=userList[i].ticket %>;
vUserList[<%=i %>].joinTime = <%=userList[i].joinTime %>;
vUserList[<%=i %>].loginTime = <%=userList[i].loginTime %>;
vUserList[<%=i %>].feni = <%=userList[i].feni %>;
vUserList[<%=i %>].fuel = <%=userList[i].fuel %>;
vUserList[<%=i %>].itemAttackCount = <%=userList[i].itemAttackCount %>;
vUserList[<%=i %>].lastStation = <%=userList[i].lastStation %>;
vUserList[<%=i %>].clearCount = <%=userList[i].clearCount %>;
vUserList[<%=i %>].playLevel = <%=userList[i].playLevel %>;
vUserList[<%=i %>].tutorial = <%=userList[i].tutorial %>;
vUserList[<%=i %>].fuelChargeTime = <%=userList[i].fuelChargeTime %>;
vUserList[<%=i %>].fuelTime = <%=userList[i].fuelTime %>;
vUserList[<%=i %>].level = new Array();
vUserList[<%=i %>].level = <%=userList[i].level %>;
<% } %>
</script>
<script>
function showUserInfo(idx) {
alert(vUserList[0].memberUid);
document.getElementById("googleUid").innerHTML=vUserList[idx].googleUid;
document.getElementById("googleName").innerHTML=vUserList[idx].googleName;
document.getElementById("memberUid").innerHTML=vUserList[idx].memberUid;
document.getElementById("clientVersion").innerHTML=vUserList[idx].clientVersion;
document.getElementById("deviceId").innerHTML=vUserList[idx].deviceId;
document.getElementById("ticket").innerHTML=vUserList[idx].ticket;
document.getElementById("joinTime").innerHTML=vUserList[idx].joinTime;
document.getElementById("loginTime").innerHTML=vUserList[idx].loginTime;
document.getElementById("feni").innerHTML=vUserList[idx].feni;
document.getElementById("fuel").innerHTML=vUserList[idx].fuel;
document.getElementById("itemAttackCount").innerHTML=vUserList[idx].itemAttackCount;
document.getElementById("lastStation").innerHTML=vUserList[idx].lastStation;
document.getElementById("clearCount").innerHTML=vUserList[idx].clearCount;
document.getElementById("playLevel").innerHTML=vUserList[idx].playLevel;
document.getElementById("tutorial").innerHTML=vUserList[idx].tutorial;
document.getElementById("fuelChargeTime").innerHTML=vUserList[idx].fuelChargeTime;
document.getElementById("fuelTime").innerHTML=vUserList[idx].fuelTime;
}
</script>
</head>
<body>
<div id="header">
<% include menubar.ejs %>
</div>
<div id="userList" vertical-align=bottom align=left>
Here will be UserList from DB<br>
<form method="post" action="/getUserList">
memberUid<input type="text" name="memberUid"><br>
LastStation<input type="text" name="startStation">~<input type="text" name="endStation"><br>
Number of List <select name="limitNum">
<option value="10">10</option>
<option value="30">30</option>
<option value="50">50</option>
</select><br>
<input type="submit" value="Search">
</form>
<% if (userList != null) {
for (var i = 0; i < userList.length; i++) { %>
<a href="#" onclick="showUserInfo(<%= i %>); return false;"><%= userList[i].memberUid %></a> <br>
<% console.log(userList[i].memberUid) %>
<% } } %>
</div>
<div align=center vertical-align=bottom>
user Information. <br>
googleUid : <p id="googleUid"></p>
googleName : <p id="googleName"></p>
memberUid : <p id="memberUid"></p>
clientVersion : <p id="clientVersion"></p>
deviceId : <p id="deviceId"></p>
ticket : <p id="ticket"></p>
joinTime : <p id="joinTime"></p>
loginTime : <p id="loginTime"></p>
feni : <p id="feni"></p>
fuel : <p id="fuel"></p>
itemAttackCount : <p id="itemAttackCount"></p>
lastStation : <p id="lastStation"></p>
clearCount : <p id="clearCount"></p>
playLevel : <p id="playLevel"></p>
tutorial : <p id="tutorial"></p>
fuelChargeTime : <p id="fuelChargeTime"></p>
fuelTime : <p id="fuelTime"></p>
</div>
</body>
</html>
变量 vUserList 不在函数 showUserInformation 的范围内。你必须在函数的作用域中声明（var 步骤）变量，因为 javascript 使用函数级作用域。必须将所有代码放在单个脚本标记中。弄清楚为什么这不起作用。我认为这只是一个格式问题。并将变量放在showUserInfo函数中。
不过，肮脏的黑客可能对您有用。从 vUserList 的声明中删除单词"var"。然后，它将污染全局名称空间。但是您应该能够从窗口中的任何位置访问它。尽管如此，我不会建议你走这条路。
只是一个评论（需要空间），一些建议
在第一个循环中，您正在执行：
var vUserList = new Array();
<% for (var i = 0; i < userList.length ; i++) { %>
vUserList[<%=i %>] = new Array();
vUserList[<%=i %>].googleUid = <%=userList[i].googleUid %>;
vUserList[<%=i %>].googleName = <%=userList[i].googleName %>;
...
这会将数组分配给 vUserList[i]，然后将其视为对象。这是有效的，因为数组是对象，但它没有使用任何数组的优点，所以你应该使用一个对象，并且使用文字而不是调用构造函数被认为是更干净的，所以：
vUserList[<%=i %>] = {};
...
为了使事情更简洁一些，您可以使用如下所示的文字：
vUserList[<%=i %>] = { googleUid: <%=userList[i].googleUid %>,
googleName: <%=userList[i].googleName %,
...
fuelTime: <%=userList[i].fuelTime %>,
level: [<%=userList[i].level %>]
};
另外，请考虑对 showUserInfo 函数使用循环和数据数组：
function showUserInfo(idx) {
var userData = ['googleUid','googleName','memberUid','clientVersion','deviceId',
'ticket','joinTime','loginTime','feni','fuel','itemAttackCount','lastStation',
'clearCount','playLevel','tutorial','fuelChargeTime','fuelTime'];
userData.forEach(function(v) {
document.getElementById(v).innerHTML = vUserList[idx][v];
});
}
您可以将类似的策略应用于第一个循环。
呵呵。
相关文章：
- 从Javascript和Php变量创建Html模板文档
- 为什么可以't我将检索到的文档分配给控制台中的变量
- 如何在外部文档中使用javascript将文本区域的内容保存为变量
- 递增 PHP 变量在 JSCRIPT 文档工作方面
- 将变量从服务器上的外部文件加载到 HTML 文档中
- 如何在文档准备函数中调用变量的click函数
- 如何在更新mongo文档时使用变量
- 在html文档的开头声明变量
- JavaScript 函数无法识别同一文档中的变量
- 从用户输入到文档编写 javascript 变量
- 当 JSDoc 是包含对象的数组时，文档变量如何
- 文档中未定义的变量
- 更少:文档加载后加载的文件上的“修改变量”
- 对于文档中的变量(Javascript）
- 从 HTML 文档中删除但不删除元素/变量
- HTML文档中的Javascript变量范围
- 修改变量而非文档中HTML的HTML标记
- 获取Javascript文档.将数据写入变量并显示
- 从ff扩展名中获取文档变量
- MongoDB / Node.JS:在循环中插入文档-变量不更新
