getElementsByName（'q'）[0]返回未定义

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()调用init()并将其返回值分配给window.onload ，这将无法正常工作。

您想将函数引用分配给window.onload 。 函数引用是函数名称，后面没有任何括号。 添加括号会指示JS解释器立即执行功能。 仅分配名称会将指向函数的指针放入window.onload以便稍后在onload事件触发时可以调用它。

---

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

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

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

---

并且，事件名称是“ blur”和“ focus”，因此您需要更改以下内容：

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

Answer 2

尝试这个：

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

Answer 3

请注意， 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();

如您所见，事件本身包含元素，因此无需添加任何其他变量。 只是知道addEventHandler不适用于所有浏览器。