<!DOCTYPE html>
<html>
<body>
<p>点击下面的按钮，将代码块循环五次：</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x="";
for (var i=0;i<5;i++)
{
x=x + "The number is " + i + "<br>";
document.getElementById("demo").innerHTML=x;
}
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<body>
<p>点击下面的按钮，将代码块循环五次：</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction()
{
var x="";
for (var i=0;i<5;i++)
{
x=x + "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>

上面两段代码是来自w3school中的一个关于for循环和标签元素赋值的问题的例子，我是之前一直纠结于将document.getElementById("demo").innerHTML=x;放在for循环内外结果为什么一样?

放在外边的情况很好理解，无非是p标签输出了循环到最后的x的结果，即：

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4

而放在里面的情况，我之前一直认为是每循环一次p标签输出一次x的结果，即：

The number is 0
The number is 0
The number is 1
The number is 0
The number is 1
The number is 2
The number is 0
The number is 1
The number is 2
The number is 3
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4

但这样的想法是错误的，因为p标签是闪现了5次输出的结果，最后显示的是最终输出的x结果，而不是把每次的值都显示出来，即：

The number is 0
The number is 1
The number is 2
The number is 3
The number is 4
---------------------

javascript中for循环和标签元素赋值问题总结的更多相关文章

  1. JavaScript中For循环以及For循环嵌套实例

    JavaScript中For循环实例 1.打印出所有的 "水仙花数 ",所谓 "水仙花数 "是指一个三位数,其各位数字立方和等于该数本身. 例如:153是一个 ...

  2. JavaScript 中 for 循环

    在ECMAScript5(简称 ES5)中,有三种 for 循环,分别是: 简单for循环 for-in forEach 在2015年6月份发布的ECMAScript6(简称 ES6)中,新增了一种循 ...

  3. Javascript中的循环变量声明，到底应该放在哪儿？

    相信很多Javascript开发者都在声明循环变量时犹豫过var i到底应该放在哪里:放在不同的位置会对程序的运行产生怎样的影响?哪一种方式符合Javascript的语言规范?哪一种方式和ecma标准 ...

  4. JavaScript基础Javascript中的循环(003)

    1.普通循环JavaScript中一般的循环写法是这样的: // sub-optimal loop for (var i = 0; i < myarray.length; i++) { // d ...

  5. 【跟着子迟品 underscore】JavaScript 中如何判断两个元素是否 "相同"

    Why underscore 最近开始看 underscore.js 源码,并将 underscore.js 源码解读 放在了我的 2016 计划中. 阅读一些著名框架类库的源码,就好像和一个个大师对 ...

  6. 我在学JavaScript中的循环

    for (var num1 = 1;num1 < 10;num1++ ){ for (var num2 = 1;num2< 10;num2++ ){ console.log(num1+'* ...

  7. [译]Javascript中的循环

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  8. JavaScript中的window对象的属性和方法；JavaScript中如何选取文档元素

    一.window对象的属性和方法 ①setTimeout()方法用来实现一个函数在指定毫秒之后运行,该方法返回一个值,这个值可以传递给clearTimeout()用于取消这个函数的执行. ②setIn ...

  9. JavaScript中的循环和闭包

    看一段比较经典的错误代码: // 希望获取页面上的所有div,在点击的时输出对应的编号 var oDom = document.querySelectorAll("div"); / ...

随机推荐

  1. Linux命令学习之两个小技巧（1）

    本篇主要想讲两个小技巧.本来技巧之类的话应该放在学完整个东西之后或者在学习中遇到时再说的,但是这两个技巧其实很简单,很多人只要我一提就知道了.与其说是技巧,不如说是注意事项. 自动补全 在Linux终 ...

  2. [2019徐州网络赛J题]Random Access Iterator

    题目链接 大致题意:从根节点出发,在节点x有son[x]次等概率进入儿子节点,求到达最深深度的概率.son[x]为x节点的儿子节点个数. 又又又又没做出来,心态崩了. 下来看了官方题解后发觉自己大体思 ...

  3. PCIe事务层包TLP Header详解

    1.事务层包的一般格式: 包的header为3DW(double word)或者4DW(一个DW代表4字节),数据负载为1~1024DW(即4~4096byte,最大4M),TLP Digest可选, ...

  4. 二： Jvm内存模型

    因为每个对象生命周期不一样,jvm在做内存管理的时候,就帮我们分成了三个区域: 1.  新生代(回收频率高)   新生和老年默认大小比例为1:2 2.  老年代(回收频率低)     最好所有的对象都 ...

  5. python学习笔记(5)

    第七章   模式匹配和正则表达式 1.不用正则表达式来查找文本模式 #对于这样的一个文本查找:3个数字,一个短横线,3个数字,4个端横线,然后再是4个数字,如:415-555-4242def isPh ...

  6. spark 在启动的时候出现JAVA_HOME not set

    解决方法:在sbin目录下的spark-config.sh 中添加对应的jdk 路径,然后使用scp -r 命令复制到各个worker节点

  7. MIT-线性代数公开课

    本博客是学习MIT-线性代数笔记,Gilbert Strang大神讲的通俗易懂,感兴趣的可以观看视频 其中习题集请点击 01)方程组的几何解释 02)矩阵消元 03)乘法和逆矩阵 04)A的LU分解 ...

  8. $strobe$monitor$display

      $strobe:当该时刻的所有事件处理完后,在这个时间步的结尾打印一行格式化的文本,语法$strobe( Argument,...);$fstrobe( Mcd, Argument,...);Mc ...

  9. fpga配置方式 .jic固化为ps模式

    FPGA不同下载方式的区别[扫盲]以及如何利用AS模式固化程序(转载)     主动配置方式(AS)和被动配置方式(PS)和最常用的(JTAG)配置方式: AS由FPGA器件引导配置操作过程,它控制着 ...

  10. python基础操作---tuple

    #coding:utf-8 tup1 = ('physics', 'chemistry', 1997, 2000); tup2 = (1, 2, 3, 4, 5 ); tup3 = "a&q ...