<!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. javascript中的继承-寄生组合式继承

    前文说过,组合继承是javascript最常用的继承模式,不过,它也有自己的不足:组合继承无论在什么情况下,都会调用两次父类构造函数,一次是在创建子类原型的时候,另一次是在子类构造函数内部.子类最终会 ...

  2. windows上zeal安装和使用--离线API文档

    1.官网:https://zealdocs.org/download.html#windows 2.github:https://github.com/zealdocs/zeal 3.下载:可下载安装 ...

  3. P1141零一迷宫

    这是一道对于除了我之外其他人都十分简单的搜索题,我终于在这个夜里搞会了. 首先其问可以到达多少个点,并不是走一次可以最多经过几个点,这就解释了为什么不需要回溯,并且递归边界则是让其全部走完即可.于是便 ...

  4. C#操作电脑多显示器设置

    电脑多显示器设置 第一种方式 通过使用api函数SetDisplayConfig来设置.这种方式在某些电脑中设置有几率会导致电脑黑屏 使用代码如下: private const uint SDC_AP ...

  5. oracle的隐藏的东东

    1: 在oracle中存在一种特殊的表单:dual 这是一张伪表,不是真正存在的 在日期的查询和触发器等多处用到 只展示系统当前时间: select sysdate from dual; 触发器:往往 ...

  6. 公用flex类

    开发过程中,很多布局,用antd的栅格还是不灵活,flex弹性布局会更好用 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 注意 ...

  7. 利用 TCMalloc 优化 Nginx 的性能

    TCMalloc 全称为 Thread-Caching Malloc,是谷歌的开源工具 google-perftools 的成员,它可以 在内存分配效率和速度上高很多,可以很大程度提高服务器在高并发情 ...

  8. Centos6.6安装apache2.4

    安装apr请参考:   http://www.cnblogs.com/yuzhaokai0523/p/4382974.html 1安装httpd-2.4.10.tar.gz wget http://w ...

  9. libboost_regex 备份用时

    libboost_regex-vc100-mt-s-1_57.lib  //生成数据

  10. GUI学习之十八——QDateTimeEdit学习总结

    在前面两章我们总结了QSpinBox和QDoubleSpinBox的用法,今天来总结一下QDateTimeEdit控件的基本用法 一.描述 1.QDateTimeEdit是一个用来编辑日期和时间的单行 ...