getElementsByName('q')[0]返回undefined

Question

我正在尝试在聚焦时让文本框放大

相关的HTML代码是

<input class="tbox" name="q" type="text" />

由于tbox是页面中每个文本框的标记,我必须使用该名称.

我试过这个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';
}

调试控制台告诉我,我不能在未定义的上使用addEventListener.

我不熟悉javascript,所以我尝试[0] .value也无济于事.

Answer 1

有几个不同的问题.首先,您需要使用:

window.onload = init;   // assign function reference to .onload to call later

代替:

window.onload = init();   // calls init() immediately and assigns return value to .onload

这是一个非常常见的JS错误.您拥有它的方式,您正在init()立即调用(在页面加载之前)并将其返回值指定为window.onload无效.

您想要为其分配函数引用window.onload.函数引用是函数的名称,后面没有任何parens.添加parens指示JS解释器现在执行函数.仅指定名称会将指向函数的指针放入其中,window.onload以便稍后在onload事件触发时调用它.

您还必须修复事件处理程序回调,因为form它不是传递给它们的内容.事件处理程序的参数是Event对象.导致该事件的对象将在this或event.target:

function wasclicked(e) {
    this.style.width = '500px';
}

function lostfocus(e) {
    this.style.width = '276px';
}

而且,事件名称是"模糊"和"焦点",所以你需要改变这个:

querybox.addEventListener('onfocus', wasclicked, false);
querybox.addEventListener('onblur', lostfocus, flase);

对此:

querybox.addEventListener('focus', wasclicked, false);
querybox.addEventListener('blur', lostfocus, flase);

结合所有内容并进行一些简化,整个过程应如下所示:

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';
}