极客观点
项目管理
HarmonyOS
有下面两段代码，前面一段能够正确显示，而后面一段却无法显示，其区别就在于后一段代码添加了<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把点击事件代码改下