<!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. P1076寻宝

    ---恢复内容开始--- 这是2012noip普及组的一个模拟题,第一次得了50,看了题解后剪枝拿到100. N层楼,m个房间,逆时针排序.每个房间有一个指示牌,也可能有楼梯,找到第(上楼的第一个房间 ...

  2. Debian/Ubuntu下安装Apache的Mod_Rewrite模块的步骤分享

    启用 Mod_rewrite 模块:sudo a2enmod rewrite 另外,也可以通过将 /etc/apache2/mods-available/rewrite.load 连接到 /etc/a ...

  3. Java——BufferedImage操作实例

    通过鼠标位置改变图像ColorModel对象索引,从而实现图像像素自动变化 BufferedImage 由图像数据的 ColorModel 和 Raster 组成.Raster 的 SampleMod ...

  4. LeetCode-239-剑指offer-滑动窗口的最大值-队列与栈-python

    给定一个数组和滑动窗口的大小,找出所有滑动窗口里数值的最大值.例如,如果输入数组{2,3,4,2,6,2,5,1}及滑动窗口的大小3,那么一共存在6个滑动窗口,他们的最大值分别为{4,4,6,6,6, ...

  5. C++实现简单的日志记录

    C++实现简单的日志记录 //dlogger.h #ifndef DLOGGER_H #define DLOGGER_H #include <iostream> #include < ...

  6. luogu P5329 [SNOI2019]字符串

    传送门 显然要写一个排序,那只要考虑cmp函数怎么写就行了.第\(i\)个字符串和第 \(j\)个,首先前\(min(i,j)-1\)个字符是相同的,然后就是要比较后缀\(min(i,j)\)和\(m ...

  7. GROUP BY关键字优化

    1.group by实质是先排序后进行分组,遵照索引建的最佳左前缀 2.当无法使用索引列,增大max_length_for_sort_data参数的设置+增大sort_buffer_size参数的设置 ...

  8. 2018-8-10-dotnet-core-编程规范

    title author date CreateTime categories dotnet core 编程规范 lindexi 2018-08-10 19:16:52 +0800 2018-05-0 ...

  9. mysql远程连接只显示部分数据库问题

    项目变更了环境,数据库换了环境,所以用navicat连接数据库,结果只能看到部分数据库. 看下高级设置,就只有两个库. 表示很奇怪,难道我的ip被禁止了吗,进入服务器查看连接用户权限 1. 首先查看服 ...

  10. Django基础命令

    创建工程 django-admin startproject 项目名创建应用 django-admin startapp 应用名 生成迁移 python3 manage.py makemigratio ...