javascript - 为什么加上<form>标签之后就不能在span中显示获得值了？
本文介绍了javascript - 为什么加上<form>标签之后就不能在span中显示获得值了？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
有下面两段代码，前面一段能够正确显示，而后面一段却无法显示，其区别就在于后一段代码添加了<form>标签，请问这是什么原因造成的？
<!DOCTYPE html>
<html>
<head>
<title>task002-01</title>
</head>
<body>
<label>请输入杭州今天的空气质量:<input type="text" id="aqi-input" name=""></label>
<button id="button">确认填写</button>
<div>您输入的值是:<span id="aqi-display"></span></div>
<script type="text/javascript">
(function(){
var text = document.getElementById("aqi-input");
var btn = document.getElementById("button");
var dis = document.getElementById("aqi-display");
btn.addEventListener("click",function(){
dis.innerHTML = text.value;
})
})();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>task002-01</title>
</head>
<body>
<form>
<label>请输入杭州今天的空气质量:<input type="text" id="aqi-input" name=""></label>
<button id="button">确认填写</button>
</form>
<div>您输入的值是:<span id="aqi-display"></span></div>
<script type="text/javascript">
(function(){
var text = document.getElementById("aqi-input");
var btn = document.getElementById("button");
var dis = document.getElementById("aqi-display");
btn.addEventListener("click",function(){
dis.innerHTML = text.value;
})
})();
</script>
</body>
</html>解决方案
因为你用了 form 包起来之后,就触发了 form表单 的默认行为, 会自动提交表单
换言之,就是你点击的时候你的浏览器刷新了,值是有的,只不过一刷新.. 没了
解决办法
用
<input type="button" value="确认提交" id="button">来代替你的button-
把点击事件代码改下
btn.addEventListener("click",function(e){ e.preventDefault() dis.innerHTML = text.value; })
这篇关于javascript - 为什么加上<form>标签之后就不能在span中显示获得值了？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
