带<br/>换行符的赋值

今天一下午因为一个带<br/>换行符的赋值给搞蒙圈了,折腾了半天才恍然大悟!

菜鸟起飞的第N天,今天把js基础知识又看了一遍,发现自己的知识体系都是bug!

废话不多说了,直接来记录下今天的总结:

<!DOCTYPE html>  
<html>  
<body>  
<p>点击下面的按钮来执行循环,该循环会跳过 i=3 的步进。</p>  
<button οnclick="myFunction()">点击这里</button>  
<p id="demo"></p>  
<script>  
function myFunction()  
{  
var x="",i=0;  
for (i=0;i<10;i++)  
  {  
  if (i==3)  
    {  
    break;  
    }  
  x=x + "The number is " + i + "<br>";  
  }  
document.getElementById("demo").innerHTML=x;  
}  
</script>    
</body>  
</html>

以上这段代码本来是学习break的用法的,然而我却发现了其他的问题:

以下是这段代码的正确输出结果:


而我原本的理解是输出结果应该为:

The number is 0
The number is 0The number is 1
The number is 0The number is 1The number is 2

然而明显这是错误的理解!

首先,document.getElementById("demo").innerHTML=x; 这个输出结果是在循环体外的,所以他只输出最后一次循环结果,其次,就算把他放到循环体内部,前两次输出结果也会被覆盖。为什么呢?因为这个是获取的id元素,一个id元素只能对应一个值。

另外,我将document.getElementById("demo").innerHTML=x;换成了  document.write(x);试了一下,放在循环体外除了一个是打印到相应获取的标签内一个是输出到整个网页上,其他循环输出的结果是一样的,但是如果把document.write(x);放到循环体内,那么结果就不一样了,以下是代码验证结果:


然后我就开始使用console.log  把循环执行的结果一步步打出来看看,结果发现我真的是愚蠢坏了!再见


好了,因为这次的愚蠢让我记住了教训,下次一定要善用console.log调试工具。希望以后不会再犯同样的错误

!!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值