while循环内和循环外得出结果一样，哪出错了吗？

因为innerHTML是替换整个标签的内容
这句放在循环外面时，只执行了一次，就是最终的结果
放在循环里面时，执行了5次，但是后面一次的结果会覆盖前一次的结果，所以还是只能看到最终的结果

解决方案 »

  1.   

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    <body>
    <p>点击下面的按钮,只要i小于5 就一直循环代码块.</p>
        <button onclick="myFunction()">点击这里</button>
        <p id="demo1"></p>
        <p id="demo2"></p>
        <p id="demo3"></p>
        <p id="demo4"></p>
        <p id="demo5"></p>
        <hr>
        <p id="xdemo1"></p>
        <p id="xdemo2"></p>
        <p id="xdemo3"></p>
        <p id="xdemo4"></p>
        <p id="xdemo5"></p>
     
        <script>
        function myFunction()
        {
            var x="",i=0;
            while (i<5)
            {
                x=x + "The number is " + i + "------";
                i++;
                document.getElementById("demo"+i).innerHTML=x;
            }
            document.getElementById("xdemo1").innerHTML=x;
            document.getElementById("xdemo2").innerHTML=x;
            document.getElementById("xdemo3").innerHTML=x;
            document.getElementById("xdemo4").innerHTML=x;
        }
        </script>
    </body>
    </html>
      

  2.   

    注意这行：x=x + "The number is " + i + "<br>";
    每一次循环都是在前一行的基础上增加一行第一次循环后x是
    The number is 0
    第二次循环后x是
    The number is 0
    The number is 1
    第三次循环后x是
    The number is 0
    The number is 1
    The number is 2
    第四次循环后x是
    The number is 0
    The number is 1
    The number is 2
    The number is 3
    第五次循环后x是
    The number is 0
    The number is 1
    The number is 2
    The number is 3
    The number is 4你最后看到的是第五次循环后的结果