刚刚有一个同学问我下面的代码出现了什么问题？ 大家可以一起看看，这是初学者非常容易犯的错误。
<!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中的值，结果就是正确的了。
时间： 2024-10-08 08:15:52