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不適用於所有瀏覽器。