javascript运行出错，大家帮忙看看是咋回事
javascript运行出错，大家帮忙看看是怎么回事。
我用javascript制作一个动态插入、删除输入框的页面，插入没有问题，但是删除的时候总也删不掉，我加了几行代码发现问题出在蓝色的”alert(input.id);“这里，input为null，为什么会出现这个错误？
在调试的时候，我想看一下自动插入的输入框的id，写了红色的代码”input.onfocus=msg(this)“，结果这句也出错了，说是”this“未定义，我想问一下这里应该怎么写？我html部分写的this就没问题。
先谢谢大家了。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div>
<div id="basicinfo_div_1" style="float:left;position:relative; width: auto; height: 100%; min-width: 50px; background-color: Gray; ">工程名称：<br/><input type="text" id="projectname_1" /><br/>分项工程名称：<br/><input type="text" id="subname_1"/></div>
<div id="classname_div" style="float:left;position:relative; width: auto; height: auto; min-width: 50px; background-color: green; ">
<div id="classname_div_1" style="float:left;position:relative; width: 100%; height: auto; min-width: 50px; background-color: green; ">
<input type="text" id="st_1" value="1" style=" display:none">分类名称：<br/><input type="text" id="classname_1" onfocus="msg(this)"/>
</div>
<div id="classname_div_button_1" style="float:left;position:relative; width: 100%; height: auto; min-width: 50px; background-color: green; ">
<button type="button" id="add_classname" onclick="addclassname(this)">增加一条</button>
<button type="button" id="reduce_classname" onclick="addclassname(this)">减少一条</button>
</div>
</div>
<div id="step1name_div_1" style="float:left;position:relative; width: auto; height: 100%; min-width: 50px; background-color: red; "></div>
<div id="step2name_div_1" style="float:left;position:relative; width: auto; height: 100%; min-width: 50px; background-color: white; "></div>
</div>
</body>
</html>
<script type="text/javascript">
function addclassname(obj)
{
if (obj.id=="add_classname")
{
var cdiv=document.getElementById("classname_div_1");
var input=document.createElement("input");
input.type="text";
input.id="classname_"+document.getElementById("st_1").value;
input.onfocus=msg(this)
document.getElementById("st_1").value=parseInt(document.getElementById("st_1").value,10) + 1;
cdiv.appendChild(input);
}
if (obj.id=="reduce_classname")
{
var input=document.getElementById("classname_"+ document.getElementById("st_1").value);
alert(document.getElementById("st_1").value);
alert("classname_"+ document.getElementById("st_1").value);
alert(input.id);
document.body.removeChild(input);
document.getElementById("st_1").value=ParseInt(document.getElementById("st_1").value,10) -1;
}
}
function msg(obj)
{
alert(obj.id)
}
</script>
------解决思路----------------------
只有你从input输入框直接调用msg的时候，this才能指代当前的input输入域，其它地方的this有别的指代。
addclassname(obj) 里面调用msg方法，直接传递this，并不是msg所在的输入域input，javascript中的this，一般指代的是最外层的作用域，方法内的this一般指代调用当前方法的对象。
------解决思路----------------------
1)alert(input.id)这里的input会为null，是因为前面在添加input元素时的流程弄反了，你先获取st1.value然后通过这个值来生成新的input的id，然后将st1.value的值加1，而你在删除当前新增的input时是通过st1.value加1后的值来获取的，所以这两个id值不一样，导致input为 null
2）msg(this)这里的this代表的是当前文档对象
3)你删除input的时候，parseInt()写成了ParseInt(),这也导致st_1.value值递减不了
我给了改了下，可正常增删input，如下：
------解决思路----------------------
事件绑定的时候需要指向一个函数，你的那种写法，是把msg函数的返回值给了onfucus事件。
我用javascript制作一个动态插入、删除输入框的页面，插入没有问题，但是删除的时候总也删不掉，我加了几行代码发现问题出在蓝色的”alert(input.id);“这里，input为null，为什么会出现这个错误？
在调试的时候，我想看一下自动插入的输入框的id，写了红色的代码”input.onfocus=msg(this)“，结果这句也出错了，说是”this“未定义，我想问一下这里应该怎么写？我html部分写的this就没问题。
先谢谢大家了。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div>
<div id="basicinfo_div_1" style="float:left;position:relative; width: auto; height: 100%; min-width: 50px; background-color: Gray; ">工程名称：<br/><input type="text" id="projectname_1" /><br/>分项工程名称：<br/><input type="text" id="subname_1"/></div>
<div id="classname_div" style="float:left;position:relative; width: auto; height: auto; min-width: 50px; background-color: green; ">
<div id="classname_div_1" style="float:left;position:relative; width: 100%; height: auto; min-width: 50px; background-color: green; ">
<input type="text" id="st_1" value="1" style=" display:none">分类名称：<br/><input type="text" id="classname_1" onfocus="msg(this)"/>
</div>
<div id="classname_div_button_1" style="float:left;position:relative; width: 100%; height: auto; min-width: 50px; background-color: green; ">
<button type="button" id="add_classname" onclick="addclassname(this)">增加一条</button>
<button type="button" id="reduce_classname" onclick="addclassname(this)">减少一条</button>
</div>
</div>
<div id="step1name_div_1" style="float:left;position:relative; width: auto; height: 100%; min-width: 50px; background-color: red; "></div>
<div id="step2name_div_1" style="float:left;position:relative; width: auto; height: 100%; min-width: 50px; background-color: white; "></div>
</div>
</body>
</html>
<script type="text/javascript">
function addclassname(obj)
{
if (obj.id=="add_classname")
{
var cdiv=document.getElementById("classname_div_1");
var input=document.createElement("input");
input.type="text";
input.id="classname_"+document.getElementById("st_1").value;
input.onfocus=msg(this)
document.getElementById("st_1").value=parseInt(document.getElementById("st_1").value,10) + 1;
cdiv.appendChild(input);
}
if (obj.id=="reduce_classname")
{
var input=document.getElementById("classname_"+ document.getElementById("st_1").value);
alert(document.getElementById("st_1").value);
alert("classname_"+ document.getElementById("st_1").value);
alert(input.id);
document.body.removeChild(input);
document.getElementById("st_1").value=ParseInt(document.getElementById("st_1").value,10) -1;
}
}
function msg(obj)
{
alert(obj.id)
}
</script>
------解决思路----------------------
只有你从input输入框直接调用msg的时候，this才能指代当前的input输入域，其它地方的this有别的指代。
addclassname(obj) 里面调用msg方法，直接传递this，并不是msg所在的输入域input，javascript中的this，一般指代的是最外层的作用域，方法内的this一般指代调用当前方法的对象。
------解决思路----------------------
1)alert(input.id)这里的input会为null，是因为前面在添加input元素时的流程弄反了，你先获取st1.value然后通过这个值来生成新的input的id，然后将st1.value的值加1，而你在删除当前新增的input时是通过st1.value加1后的值来获取的，所以这两个id值不一样，导致input为 null
2）msg(this)这里的this代表的是当前文档对象
3)你删除input的时候，parseInt()写成了ParseInt(),这也导致st_1.value值递减不了
我给了改了下，可正常增删input，如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div>
<div id="basicinfo_div_1" style="float:left;position:relative; width: auto; height: 100%; min-width: 50px; background-color: Gray; ">工程名称：<br/><input type="text" id="projectname_1" /><br/>分项工程名称：<br/><input type="text" id="subname_1"/></div>
<div id="classname_div" style="float:left;position:relative; width: auto; height: auto; min-width: 50px; background-color: green; ">
<div id="classname_div_1" style="float:left;position:relative; width: 100%; height: auto; min-width: 50px; background-color: green; ">
<input type="text" id="st_1" value="1" style=" display:none">分类名称：<br/><input type="text" id="classname_1" onfocus="msg(this)"/>
</div>
<div id="classname_div_button_1" style="float:left;position:relative; width: 100%; height: auto; min-width: 50px; background-color: green; ">
<button type="button" id="add_classname" onclick="addclassname(this)">增加一条</button>
<button type="button" id="reduce_classname" onclick="addclassname(this)">减少一条</button>
</div>
</div>
<div id="step1name_div_1" style="float:left;position:relative; width: auto; height: 100%; min-width: 50px; background-color: red; "></div>
<div id="step2name_div_1" style="float:left;position:relative; width: auto; height: 100%; min-width: 50px; background-color: white; "></div>
</div>
</body>
</html>
<script type="text/javascript">
function addclassname(obj)
{
var cdiv=document.getElementById("classname_div_1");
var st_1=document.getElementById("st_1");
if (obj.id=="add_classname")
{
var input=document.createElement("input");
input.type="text";
input.onfocus=function()
{
alert(this.id);
};
st_1.value=parseInt(st_1.value,10) + 1;
input.id="classname_"+st_1.value;
cdiv.appendChild(input);
}
if (obj.id=="reduce_classname")
{
if(st_1.value==0)
{
return;
}
var input=document.getElementById("classname_"+ st_1.value);
cdiv.removeChild(input);
st_1.value=parseInt(st_1.value,10) -1;
}
}
function msg(obj)
{
alert(obj.id)
}
</script>
------解决思路----------------------
input.onfocus = funtion(){
msg(this);
}
事件绑定的时候需要指向一个函数，你的那种写法，是把msg函数的返回值给了onfucus事件。