关于JS：使用一个变量存储input.value 的值，为什么该变量取不到值？

Question

代码如下：

<input type="text" id="input"/>
<script>
var txt = document.getElementById("input");
var name = txt.value;
    txt.onblur = function(){
        alert(name);
    }
</script>

以上代码并不能取值，结果如图：

图：弹出的对话框一片空白，什么都没有。

不知道为什么传不了图，唉，诸事不顺啊！

Answer 1

取不到值的原因是你还没有输入值你的代码

var name = txt.value;

就已经执行了，所以取值为空。这样即可：

var txt = document.getElementById("input");   

txt.onchange = function(){  //觉得用onchange更好，onblur也可以的
    var name = txt.value;  //取值要在监听事件之后，不然在之前取值就为空
    alert(name);
}

哈哈，诸事不顺，学会调试吧，会顺很多。放到浏览器，打开chrome开发者工具，对js代码打断点，进行调试，查看你取的值，你就会发现问题。发现问题解决问题，自己发现答案比别人告诉答案更惊喜。而调试会给你惊喜。

Answer 2

你的脚本在网页载入的时候就已经执行了，这个时候你的输入框还没有输入值，自然取到的就是空

Answer 3

在加载这个代码的时候，你还没有输入值，当然输出什么都没有啦

Answer 4

代码时序逻辑不对，错在取值在赋值之前。

<input type="text" id="input"/>
<script>
var txt = document.getElementById("input");
    txt.onblur = function(){
    var name = txt.value;
        alert(name);
    }
</script>