JS - 如何使用參數添加一個onclick事件到div？

我知道如何onclick事件沒有參數添加到一個div：JS - 如何使用參數添加一個onclick事件到div？

newDiv.onclick = selectUnit; 

function selectUnit() {}

但我不能使它與參數的工作原理：

function appendUnit(nb) { 
    var newDiv = document.createElement("div"); 

    newDiv.id = "unit" + nb; 
    newDiv.onclick = selectUnit(this.id); // This throws me undefined 
    document.getElementById("unitsList").appendChild(newDiv); 
} 

function selectUnit(id) { 
    console.debug(id); 
}

我怎麼能這樣做？

來源

2014-04-06 Elfayer

你可以指定何時調用appendUnit嗎？ – abc123

Buy

'buyUnit（）函數調用appendUnit（）。 – Elfayer

你需要爲一個匿名函數，因爲沒有辦法參數傳遞給引用功能

function appendUnit() { 
    var newDiv = document.createElement("div"); 

    newDiv.onclick = function() { 
     selectUnit(this.id); 
    } 

    document.getElementById("unitsList").appendChild(newDiv); 
} 

function selectUnit(id) { 
    console.debug(id); 
}

但要注意的this值將保持，所以你可以做

function appendUnit() { 
    var newDiv = document.createElement("div"); 

    newDiv.onclick = selectUnit; 

    document.getElementById("unitsList").appendChild(newDiv); 
} 

function selectUnit() { 
    console.debug(this.id); // this is still the same here 
}

來源

2014-04-06 12:37:21 adeneo

你從來沒有設置ID在你的示例代碼：

function appendUnit() { 
    var newDiv = document.createElement("div"); 
    newDiv.id = "somevalue"; 

    [...] 
    newDiv.onclick = "selectUnit(this.id);" // This throws me undefined 
    document.getElementById("unitsList").appendChild(newDiv); 
} 

function selectUnit(id) { 
    console.debug(id); 
}

來源

2014-04-06 12:35:14 tekrat

我在真實的代碼中做了編輯我的文章。但是你的代碼不起作用。你指出了這個問題，'this'指的是此時不是div的函數。我不知道如何解決這個問題。 – Elfayer

嘗試在onclick事件中添加引號。我剛編輯過這個例子。 – tekrat

試試這個

function appendUnit() { 
    var newDiv = document.createElement("div"); 

    [...] 
    newDiv.onclick = function(){ 
     selectUnit(newDiv.id); // This throws me undefined 
    } 
    document.getElementById("unitsList").appendChild(newDiv); 
}

來源

2014-04-06 12:37:07 drkunibar

隨着該行代碼

newDiv.onclick = selectUnit(this.id);

你只需要調用該函數，得到它的結果，並將其存儲到onclick處理程序。

沒有定義內部返回的函數返回undefined。 this.id將引用您當前在您的範圍內的this元素，該元素可能是window對象。

當的onclick發生時，地方鉻會調用這個函數

DOMElement.onclick(EventObject);

並伴您行會是這樣的

(undefined)(this.id);

導致錯誤

所有你必須要做的就是用方法設置onclick

newDiv.onclick = selectUnit;

和Chrome將調用此

DOMElement.onclick(EventObject);

有DOMElement.onclick == selectUnit我們可以假設的代碼上線是與此類似：

selectUnit(EventObject);

然後在你的selectUnit功能，你必須知道如何訪問id 。你可以在https://developer.mozilla.org/en-US/docs/Web/API/Event看到你可以用它做什麼。所以新的selectUnit函數將是：

function selectUnit(event) { 
    var id = event.target.id; 
    console.debug(id); 
}

來源

2014-04-06 12:54:25

JS - 如何使用參數添加一個onclick事件到div？

回答

相關問題