关于jscript中for循环中innerHTML的工作
[英]regarding the working of innerHTML in for loop in jscript
问题描述
My HTML code in which I want to know what happens when I use text instead of text+ : 
我的HTML代码，我想知道当我使用text而不是text+时会发生什么：
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Loops</h2>
<div id="demo"></div>
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
var text = "";
var i;
for (i = 0; i < cars.length; i++) {
text+=cars[i]+"<br>";
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
4 个解决方案
解决方案1
1 2017-08-08 12:13:57
text+=cars[i]
What this code means is that you are adding the i'th index of the cars array to the end of the string 'text'. 这段代码的含义是你将cars数组的第i个索引添加到字符串'text'的末尾。 It could be rewritten as the following, 它可以改写如下，
text = text + cars[i]
so document.getElementById("demo").innerHTML = text; so document.getElementById("demo").innerHTML = text; tells the browser to write the contents of the text variable inside an HTML with id = "demo" 告诉浏览器在HTML中写入text变量的内容， id = "demo"
for each iteration of the for loop value of the text variable is passed in. Because text+=cars[i]+"<br>"; 对于for循环的每次迭代， text变量的值都被传入。因为text+=cars[i]+"<br>"; is before the document.getElementById("demo").innerHTML = text; 在document.getElementById("demo").innerHTML = text;之前document.getElementById("demo").innerHTML = text; this value changes from according to the element residing in the i index of the cars array. 此值根据驻留在cars数组的i索引中的元素而变化。
at the first iteration i = 0 so first element of the array BMW becomes the value of text and gets passed in to document.getElementById("demo").innerHTML = text; 在第一次迭代时i = 0所以数组BMW第一个元素成为text的值并传入document.getElementById("demo").innerHTML = text;
in the second iteration i = 1 and the value of the text becomes Volvo and so on so fort until you reach the end of the array and i < cars.length is not true anymore and control exits the for loop. 在第二次迭代中i = 1并且text的值变为Volvo等等直到你到达数组的末尾并且i < cars.length不再是真的并且控制退出for循环。
解决方案2
1 2017-08-08 12:15:24
The = operator is the assignment operator . =运算符是赋值运算符 。 It assigns a value to a variable, overwriting the old value: 它为变量赋值，覆盖旧值：
var a = 'Hello, ';
a = 'World!';
console.log(a); // logs 'World!'
The += operator is the addition assignment operator . +=运算符是加法赋值运算符 。 It adds a value to the value of a variable: 它为变量的值添加一个值：
var a = 'Hello, ';
a += 'World!';
console.log(a); // logs 'Hello, World!'
It's equivalent to: 它相当于：
var a = 'Hello, ';
a = a + 'World!';
console.log(a); // logs 'Hello, World!'
解决方案3
1 2017-08-08 12:38:37
If you replace text+ with text then you will get Audi as output. 如果您将text +替换为文本，那么您将获得Audi作为输出。
If your question is though the text+ and innerHTML is given in loop but still it is not getting appended twice? 如果您的问题是虽然文本+和innerHTML是在循环中给出但仍然没有附加两次？ then the answer is - innerHTML works in such a way that it overrides the existing values. 然后答案是 - innerHTML以一种覆盖现有值的方式工作。
解决方案4
0 2017-08-08 12:18:47
for (i = 0; i < cars.length; i++) {
text+=cars[i]+"<br>";
document.getElementById("demo").innerHTML = text;
}
// This produces :
BMW
Volvo
Saab
Ford
Fiat
Audi
// While this
for (i = 0; i < cars.length; i++) {
text=cars[i]+"<br>";
document.getElementById("demo").innerHTML = text;
}
// Produces :
Audi
Because when you say : 因为当你说：
text+=cars[i]+"<br>";
It means : (add cars[i]+" 这意味着:(添加汽车[i] +“
" to the text but keep the former value) “对文本但保留以前的值）
text= text + cars[i]+"<br>";
But when you say : 但是当你说：
text=cars[i]+"<br>";
You mean replace the old value of text with cars[i]+"<br>" each time, so you'll end up with the last value. 你的意思是每次用cars[i]+"<br>"替换旧的文本值，这样你最终会得到最后一个值。
++ Improvement : ++改进：
for (i = 0; i < cars.length; i++) {
text+=cars[i]+"<br>";
}
document.getElementById("demo").innerHTML = text; // use this outside of the loop
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.