getElementsByName('q')[0] returns undefined

Question

I'm trying to get a textbox to enlarge when focused

The relevant html code is

<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.

I tried this 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.

I'm not familiar with javascript, so I tried [0].value as well to no avail.

Answer 1

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. 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.

You want to assign a function reference to 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. Assigning just the name puts a pointer to the function into window.onload so it can be called later when the onload event fires.

---

You also have to fix your event handler callbacks because the form is not what is passed to them. The argument to an event handler is the Event object. The object that caused the event will be in this or 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:

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

Answer 2

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

Answer 3

Note that onfocus is the the event handler, but the event itself is 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.