问题点：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取input值</title>
</head>
<body>
<input type="text" id="input" value="" />
<button id="button">获取input值</button>
<script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript">
$("#input").val("123");
var testValue = $("#input").val();
$("#button").click(function(){
alert(testValue);
})
</script>
</body>
</html>
浏览器：
image.png
目的：input输入框输入值后获取到当前输入的值。
但是如果像这么写，不管你输入什么，获取到的值始终是123
image.png
这是为什么呢？
原因就在于执行顺序：
$("#input").val("123");
var testValue = $("#input").val();
$("#button").click(function(){
alert(testValue);
})
在click之前，testValue已经被赋值了，也执行了，然后在click，值肯定是123。
所以调整代码顺序就好了：
$("#input").val("123");
$("#button").click(function(){
var testValue = $("#input").val();
alert(testValue);
})
这样的话先点击后再赋值，就可以取到当前的值了！
image.png
网友评论