为什么加上<form>标签之后就不能在span中显示获得值了？

Question

有下面两段代码，前面一段能够正确显示，而后面一段却无法显示，其区别就在于后一段代码添加了<form>标签，请问这是什么原因造成的？

Answer 1

因为你用了 form 包起来之后,就触发了 form表单 的默认行为, 会自动提交表单
换言之,就是你点击的时候你的浏览器刷新了,值是有的,只不过一刷新.. 没了

解决办法

1. 用 <input type="button" value="确认提交" id="button"> 来代替你的button

2. 把点击事件代码改下

•       btn.addEventListener("click",function(e){
             e.preventDefault()
             dis.innerHTML = text.value;
        })