老师我把两个值在外面声明为什么相加会有延迟
来源：3-1 添加JS功能
贾海洋
2020-07-22 12:58:23
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.jsq{
margin: 0 auto;
width: 500px;
height: 200px;
position: absolute;
top: 50%;
margin-top: -100px;
left: 50%;
margin-left: -250px;
}
</style>
</head>
<body>
<div class="jsq">
<p> <input type="text" class="value1" value="5">
<span class="sign">+</span>
<input type="text" class="value2" value="1">
<span>=</span>
<span class="result">2</span>
</p>
<input type="button" value="+" title="add" class="btn">
<input type="button" value="-" title="subtract" class="btn">
<input type="button" value="x" title="multiply" class="btn">
<input type="button" value="÷" title="divide" class="btn">
</div>
<script>
var num1Ele=document.querySelector(".value1");
var num2Ele=document.querySelector(".value2");
var sign=document.querySelector(".sign");
console.log(sign);
var btns=document.querySelectorAll(".btn");
console.log(btns[0])
var res=document.querySelector(".result");
console.log(res)
var n1=num1Ele.value;
var n2=num2Ele.value;
console.log(n1);
var add=function(num1,num2){
sign.innerHTML="+";
var result=+num1+ +num2;
res.innerHTML=result;
}
btns[0].onclick=function(){
add(n1,n2);
}
</script>
</body>
</html>
1回答
-
好帮手慕慕子
2020-07-22
同学你好，不是很清楚描述的相加会有延迟是什么意思？是指在函数外获取输入框的值，打开页面时结果不对，需要点击按钮才可以是吗？
如果是这样的话，那么是因为在按钮的点击事件中调用的add方法，只有在点击按钮后，才会执行add函数，更新结果。
另，有一个需要注意的问题就是：因为在函数外获取的是打开页面时输入框里的值，当修改输入框的值之后，点击加号，并不能更新n1和n2的值，导致效果实现存在误差。
建议修改：在按钮点击事件中获取输入框的值。
如果还有问题，可以图文结合详细描述下具体指的是哪里，便于帮助同学准确的定位与解决问题。
祝学习愉快~
0
相似问题