javascript运行出错，大家帮忙看看是怎么回事。

linanir77 2015-04-07 01:44:40
我用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>
...全文
180 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
linanir77 2015-04-07
  • 打赏
  • 举报
 回复
引用 6 楼 chenyang37 的回复:
事件绑定的时候需要指向一个函数，你的那种写法，是把msg函数的返回值给了onfucus事件。
能告诉我这里应该怎么写吗？完全没有思路呀。
linanir77 2015-04-07
  • 打赏
  • 举报
 回复
事件绑定的时候需要指向一个函数，你的那种写法，是把msg函数的返回值给了onfucus事件。[/quote] 能告诉我这里应该怎么写吗？完全没有思路呀。
linanir77 2015-04-07
  • 打赏
  • 举报
 回复
引用 5 楼 u010005508 的回复:
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，如下：
就是这个原因，一句话就解决了我的问题，太感谢了。
chenyang37 2015-04-07
  • 打赏
  • 举报
 回复 

input.onfocus = funtion(){
 msg(this);
}
事件绑定的时候需要指向一个函数，你的那种写法，是把msg函数的返回值给了onfucus事件。
highnewrain 2015-04-07
  • 打赏
  • 举报
 回复
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>
linanir77 2015-04-07
  • 打赏
  • 举报
 回复
引用 3 楼 magi1201 的回复:
只有你从input输入框直接调用msg的时候，this才能指代当前的input输入域，其它地方的this有别的指代。 addclassname(obj) 里面调用msg方法，直接传递this，并不是msg所在的输入域input，javascript中的this，一般指代的是最外层的作用域，方法内的this一般指代调用当前方法的对象。
能具体说一下我这里应该用什么代替this吗？我换过input，虽然没有提示错误，但是仍然实现不了弹出输入框id的功能。
姜小白- 2015-04-07
  • 打赏
  • 举报
 回复
只有你从input输入框直接调用msg的时候，this才能指代当前的input输入域，其它地方的this有别的指代。
addclassname(obj) 里面调用msg方法，直接传递this，并不是msg所在的输入域input，javascript中的this，一般指代的是最外层的作用域，方法内的this一般指代调用当前方法的对象。
linanir77 2015-04-07
  • 打赏
  • 举报
 回复
引用 1 楼 magi1201 的回复:
msg(this) 定义msg 方法的时候，指定一个入参 function msg(obj) { 这里的obj 就是你传递的this了，使用this.id 便得到了你传递的对象的属性id }
我就是这么做的，最后几行你看看，就是这样弄得。
姜小白- 2015-04-07
  • 打赏
  • 举报
 回复
msg(this)
定义msg 方法的时候，指定一个入参
function msg(obj) {
这里的obj 就是你传递的this了，使用this.id 便得到了你传递的对象的属性id
}
基础篇：1.JavaScript运行在html中，引用有几种方式？—— 6.js中常用的输出方式？...
书接上文，上文提到若干条JavaScript的基础性知识，大部分都是一些概念性的东西，本着认真严谨的态度，我们要认真对待，有些条目的问题是某个知识点的周边延伸，为节约篇幅，就一起整理了，如有描述不对的地方或者是描述不足的地方，望大家批评指正，下面是我给我”参考答案“，也只是仅供参考： 1.JavaScript运行在html中，引用有几种方式？ 我知道的方法有3种： 第一种：外部引用...
vb获取html中的inout,关于Base64编码的难题，请来帮忙(VB6调用javascript函数示例)
关于Base64编码的难题，请高手进来帮忙(VB6调用javascript函数示例)本帖最后由 bcrun 于 2014-06-14 11:07:30 编辑关于VB6的base64编码，百度搜索有不少代码，但都没能实现如下功能。似乎都是GB2312编码将《中华人民共和国》编码成《5Lit5Y2O5Lq65rCR5YWx5ZKM5Zu9》后来发现在线编码工具http://tool.china...
学习Javascript 编程心得体会
学习JavaScript这门课程也有个月。匆忙之间,只是觉得时间过的真快,胡杰老师一下就把这个课程给我们上完了.也觉得真没有什么好说的。不过,既然学完这个课程,总得有一些东西是我们要记住的. 一直以来都是在模糊之中度过,但从学习JAVASCRIPT一个礼拜之后,就觉得很有趣了.首先是由于JAVASCRIPT是用于网页一些特效以及表单验证的.对于这个,每次看到自己做出的那些脚本...
廖雪峰JavaScript教程
JavaScript简介 JavaScript历史 要了解JavaScript，我们首先要回顾一下JavaScript的诞生。 在上个世纪的1995年，当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。 由于网景公司希望能在静态HTML页面上添加一些动态效果，于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言。你没看错，
JavaScript 开发规范要求
作为一名开发人员（We前端JavaScript开发），不规范的开发不仅使日后代码维护变的困难，同时也不利于团队的合作，通常还会带来代码安全以及执行效率上的问题。本人在开发工作中就曾与不按规范来开发的同事合作过，与他合作就不能用“愉快”来形容了。现在本人撰写此文的目的除了与大家分享一点点经验外，更多的是希望对未来的合作伙伴能够起到一定的借鉴作用。当然，如果我说的有不科学的地方还希望各路前辈...
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章