首页 > 代码库 > 关于函数执行过程的一点思考
关于函数执行过程的一点思考
刚刚有一个同学问我下面的代码出现了什么问题？ 大家可以一起看看，这是初学者非常容易犯的错误。
<!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="http://www.mamicode.com/确定"> </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="http://www.mamicode.com/确定"> </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中的值，结果就是正确的了。
关于函数执行过程的一点思考
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。