[英]Javascript loop logic is incorrect
function authorNumbering() {
var authorDivs = document.getElementById('authorView').getElementsByTagName("div");
var labels = [];
var nameForLabels = ["Author 1", "Author 2", "Author 3", "Author 4", "Author 5", "Author 6", "Author 7"];
for (var i = 0; i < authorDivs.length; i++) {
var labelsFromDiv = authorDivs[i].getElementsByTagName("label");
for (var x = 0; x < labelsFromDiv.length; x++) {
if (!(typeof labelsFromDiv.item(x) === "undefined" || labelsFromDiv.item(x) == null)) {
labels[x] = labelsFromDiv.item(x);
}
}
labels[i].innerHTML = nameForLabels[i];
}
}
Essentially the function (or at least what it does in my head) goes through and gets a bunch of labels from the author divs. 本质上,该功能(或至少在我的脑海中起作用)通过并从作者div中获得了一堆标签。 I then save the labels (which are not undefined or null) into an array. 然后,将标签(不是未定义或为null的标签)保存到数组中。 I now would like to be able to change the labels as shown above (at x
) but for some reason x
is always either 0 or 1. I've tried a couple things but I don't think I understand the logic enough to figure it out properly. 我现在希望能够更改上面显示的标签(在x
),但是由于某种原因, x
总是为0或1。我尝试了几件事,但我认为我对逻辑的理解不足以理解正确地出来。 labels[]
also has duplicates within the array, how can I avoid having duplicates while still having two loops? labels[]
在数组中也有重复项,如何在仍然有两个循环的同时避免重复项?
I'm new to JavaScript but I'm trying my best. 我是JavaScript新手,但我正在尽力而为。
Edit 1: Wow, I really messed up what I was trying to do there. 编辑1:哇,我真的搞砸了我想在那里做的事情。 Thanks for the help I've updated the code. 感谢您的帮助,我已经更新了代码。
What I want to do is rename the labels with a label from nameForLabels
array. 我要执行的操作是使用nameForLabels
数组中的标签重命名标签。 This works for the first label but then I receive the following error: TypeError: labels[i] is undefined
这适用于第一个标签,但随后出现以下错误: TypeError: labels[i] is undefined
This is happening because labels
never exceeds the length of 1, I think it gets rewritten every time rather than get written to the next position in the array. 发生这种情况是因为labels
永远不会超过1的长度,我认为labels
每次都会被重写,而不是被写入数组的下一个位置。 How come x
never goes higher than 0? x
为何从未超过0?
What I would like to see is all the labels in the labels
array get changed to those that are in the nameForLabels
array. 我想看到的是, labels
数组中的所有标签都更改为nameForLabels
数组中的nameForLabels
。 For example the label in labels[0]
would become Author 1
, and labels[1]
would become Author 2
and so on. 例如, labels[0]
中的labels[0]
将成为Author 1
, labels[1]
将成为Author 2
,依此类推。
Edit 2: HTML example added: 编辑2:添加了HTML示例:
<div style="display: block;" id="authorView" class="form-horizontal">
<div id="author0" class="form-group">
<div class="col-sm-4 control-label"><label class="" for="author0" id="lblauthor0">Author 1:</label></div>
<div class="col-sm-8">
<div class="input-group"><input class="form-control" ... *keeps going with irrelevant information*
</div>
</div>
<div id="author1" class="form-group">
<div class="col-sm-4 control-label"><label class="" for="author1" id="lblauthor1">Author 2:</label></div>
<div class="col-sm-8">
<div class="input-group"><input class="form-control" ... *keeps going with irrelevant information*
</div>
</div>
<div id="author2" class="form-group">
<div class="col-sm-4 control-label"><label class="" for="author2" id="lblauthor2">Author 3:</label></div>
<div class="col-sm-8">
<div class="input-group"><input class="form-control" ... *keeps going with irrelevant information*
</div>
</div>
<div id="author3" class="form-group">
<div class="col-sm-4 control-label"><label class="" for="author3" id="lblauthor3">Author 4:</label></div>
<div class="col-sm-8">
<div class="input-group"><input class="form-control" ... *keeps going with irrelevant information*
</div>
</div>
<div id="author4" class="form-group">
<div class="col-sm-4 control-label"><label class="" for="author4" id="lblauthor4">Author 5:</label></div>
<div class="col-sm-8">
<div class="input-group"><input class="form-control" ... *keeps going with irrelevant information*
</div>
</div>
</div>
I don't think that is exactly your code since you can't have a function name loop... Apart from that, it does work. 我不认为这正是您的代码,因为您没有函数名循环...除此之外,它确实有效。
https://jsfiddle.net/utswp2v0/ https://jsfiddle.net/utswp2v0/
<script type="text/javascript">
function FindGoodFunctionName() {
var authorDivs = document.getElementById('authorView').getElementsByTagName("div");
var labels = [];
for (var i = 0; i < authorDivs.length; i++) {
var labelsFromDiv = authorDivs[i].getElementsByTagName("label");
for (var x = 0; x < labelsFromDiv.length; x++) {
// Just "Not" ! the if statement, don't need to have a empty one
if (typeof labelsFromDiv.item(x) === "undefined" || labelsFromDiv.item(x) == null) { }
else {
labels[x] = labelsFromDiv.item(x);
labels[x].innerHTML = "Author 1";
labels[x].innerHTML = "Author 2";
labels[x].innerHTML = "Author 3"; // This is weird, assigning 3 different value to the same label
}
}
}
}
</script>
<div id="authorView">
<div><label></label><label></label><label></label></div>
<div><label></label><label></label><label></label></div>
<div><label></label><label></label><label></label></div>
</div>
<input type="button" onclick="FindGoodFunctionName();" value="test" />
Update 更新
Here's how it can look like with your html. 这就是您的html看起来的样子。
function FindGoodFunctionName() {
var authorLabels = document.getElementById('authorView').getElementsByTagName("label");
var labels = [];
for (var i = 0; i < authorLabels.length; i++) {
labels[i] = authorLabels[i];
labels[i].innerHTML = "aaaa";
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.