关于函数执行过程的一点思考
Posted Wayne Zhu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了关于函数执行过程的一点思考相关的知识，希望对你有一定的参考价值。
刚刚有一个同学问我下面的代码出现了什么问题？ 大家可以一起看看，这是初学者非常容易犯的错误。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <form action="" method="post"> <input type="text" id="ccs" > <input type="button" onclick="valll()" value="确定"> </form> <p id="c1"></p> <script type="text/javascript"> var username=document.getElementById("ccs").value; var c2=document.getElementById("c1"); function valll(){ if(username){ c2.innerHTML=username; }else{ c2.innerHTML="没有输入"; } } </script> </body> </html>
这个同学的本意是通过此代码实现这样的一个功能：当我们在输入框中如果输入了内容，那么p标签中会显示相应的内容，如果没有输入，那么则显示“没有输入”。可是最终输入与否都只会显示“没有输入”，这是为什么呢？
其实很简单，当页面加载结束之后（实际上在JavaScript函数外部应该加上window.onload事件），前面两个声明语句只执行了一次，而每次调用函数不会在执行前面两个声明语句，于是username的值始终是空的，我们始终得不到正确结果。改进如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="" method="post">
<input type="text" id="ccs">
<input type="button" onclick="valll()" value="确定">
</form>
<p id="c1"></p>
<script type="text/javascript">
var username=document.getElementById("ccs");
var c2=document.getElementById("c1");
function valll(){
if(username.value){
c2.innerHTML=username.value;
}else{
c2.innerHTML="没有输入";
}
}
</script>
</body>
</html>
这样，每次在调用valll函数时，都会获得当前id为ccs中的值，结果就是正确的了。
以上是关于关于函数执行过程的一点思考的主要内容，如果未能解决你的问题，请参考以下文章