[英]getElementsByName('q')[0] returns undefined
I'm trying to get a textbox to enlarge when focused 我正在尝试使文本框在集中时扩大
The relevant html code is 相关的html代码是
<input class="tbox" name="q" type="text" />
Since tbox is a catchall for every textbox in the page, I have to work with the name. 由于tbox是页面中每个文本框的统称,因此我必须使用该名称。
I tried this javascript 我试过这个JavaScript
window.onload = init();
function init()
{
var arr = new Array();
arr = document.getElementsByName("q");
var querybox = arr[0];
querybox.addEventListener('onfocus', wasclicked, false);
querybox.addEventListener('onblur', lostfocus, false);
}
function wasclicked(form)
{
form.q.style['width'] = '500px';
}
function lostfocus(form)
{
form.q.style['width'] = '276px';
}
Debug console tells me I can't use addEventListener on an undefined. 调试控制台告诉我,无法在未定义的状态上使用addEventListener。
I'm not familiar with javascript, so I tried [0].value as well to no avail. 我对javascript不熟悉,所以我也尝试了[0] .value,但无济于事。
There are several different issues. 有几个不同的问题。 First off, you need to use:
首先,您需要使用:
window.onload = init; // assign function reference to .onload to call later
instead of: 代替:
window.onload = init(); // calls init() immediately and assigns return value to .onload
This is a very common JS mistake. 这是一个非常常见的JS错误。 The way you have it, you are calling
init()
immediately (before the page has loaded) and assigning its return value to window.onload
which won't work. 拥有它的方式是,您要立即(在页面加载之前
init()
调用init()
并将其返回值分配给window.onload
,这将无法正常工作。
You want to assign a function reference to window.onload
. 您想将函数引用分配给
window.onload
。 A function reference is the name of the function WITHOUT any parens after it. 函数引用是函数名称,后面没有任何括号。 Adding parens instructs the JS interpreter to execute the function NOW.
添加括号会指示JS解释器立即执行功能。 Assigning just the name puts a pointer to the function into
window.onload
so it can be called later when the onload
event fires. 仅分配名称会将指向函数的指针放入
window.onload
以便稍后在onload
事件触发时可以调用它。
You also have to fix your event handler callbacks because the form
is not what is passed to them. 您还必须修复事件处理程序回调,因为该
form
不是传递给它们的内容。 The argument to an event handler is the Event
object. 事件处理程序的参数是
Event
对象。 The object that caused the event will be in this
or event.target
: 导致事件的对象将在
this
或event.target
:
function wasclicked(e) {
this.style.width = '500px';
}
function lostfocus(e) {
this.style.width = '276px';
}
And, the event names are "blur" and "focus" so you need to change this: 并且,事件名称是“ blur”和“ focus”,因此您需要更改以下内容:
querybox.addEventListener('onfocus', wasclicked, false);
querybox.addEventListener('onblur', lostfocus, flase);
to this: 对此:
querybox.addEventListener('focus', wasclicked, false);
querybox.addEventListener('blur', lostfocus, flase);
Combining everything and doing a little simplification, the whole thing should look like this: 结合所有内容并进行一些简化,整个过程应如下所示:
window.onload = init;
function init() {
var querybox = document.getElementsByName("q")[0];
querybox.addEventListener('focus', wasclicked, false);
querybox.addEventListener('blur', lostfocus, false);
}
function wasclicked(e) {
this.style.width = '500px';
}
function lostfocus(e) {
this.style.width = '276px';
}
Try this: 尝试这个:
window.onload = init();
function init()
{
var arr = document.getElementsByName("q");
var querybox = arr[0];
querybox.addEventListener('onfocus', wasclicked, false);
querybox.addEventListener('onblur', lostfocus, flase);
}
function wasclicked(form)
{
form.q.style['width'] = '500px';
}
function lostfocus(form)
{
form.q.style['width'] = '276px';
}
Note that onfocus
is the the event handler, but the event itself is focus
. 请注意,
onfocus
是事件处理程序,但事件本身是focus
。
function init()
{
arr = document.getElementsByName("q");
var querybox = arr[0];
querybox.addEventListener('focus', wasclicked, false);
querybox.addEventListener('blur', lostfocus, false);
}
function wasclicked(e)
{
e.target.style.width = '500px';
}
function lostfocus(e)
{
e.target.style.width = '276px';
}
window.onload = init();
As you can see, the event itself contains the elemet so there's no need to add any other variable. 如您所见,事件本身包含元素,因此无需添加任何其他变量。 Just know that
addEventHandler
won't work on all browsers. 只是知道
addEventHandler
不适用于所有浏览器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.