[英]JavaScript - document.getElementByID with onClick
[英]How to add onclick event to exist element by Javascript? (document.getElementbyID)
我的項目中有一個按鈕,當您單擊它時會調用一個函數並將onclick
事件添加到我項目中的所有某些元素並顯示我隱藏的彈出元素容器。
我有一個函數可以搜索頁面中所有存在的元素,並將onclick
事件添加到它們具有特定類的一些元素中。
我的元素存儲在列表數組中。 在這個數組的每個單元格(數組名稱是list
)中存儲了一個如下所示的元素:
list[0] = document.getElementById("my_div_id");
list[1] = document.getElementById("my_div_id_1");
list[2] = document.getElementById("my_div_id_2");
...
list[n] = document.getElementById("my_div_id_n");
我的 Javascript 代碼頂部有一個如下所示的函數:
function say_hello(e, msg) {
if (e == null) e = window.event;
//now e handler mouse event in all browser !!!
alert (e + "::" + msg);
}
我有一個函數可以將onclick
事件添加到數組中的每個元素。 我在下面的類型中添加了onclick
事件(用 (*) 注釋分隔),但它們中的任何一個都不起作用:
function search_and_add_events_to_all_dragable_elements (list) {
for (var z = 0; z < list.length; z++) {
list[z].href = "javascript:;";
var e;
var test_msg = "VAYYYYYYYYYY";
/**************
element.onclick = new Function { alert ('hi'); };
element.onclick = new Function () { alert ('hi'); };
element.onclick = new function { alert ('hi'); };
element.onclick = new function () { alert ('hi'); };
element.onclick = new function () { return alert ('hi'); };
element.onclick = function () { return alert ('hi'); };
element.onclick = alert ('hi');
element.onclick = "alert ('hi');";
element.onclick = say_hello(e, test_msg);
element.onclick = "say_hello();";
element.onclick = (function (e, test_msg) { return function(e) { sib(e, test_msg); };
element.onclick = (function () { return function() { alert("ahaaay"); };
**************/
list[z].style["padding"] = "20px";
list[z].style["border"] = "solid 10px";
list[z].style["backgroundColor"] = "#CCC";
}
}
我在代碼末尾更改style
以執行我的代碼是工作並真正結束。 每次都更改樣式,但onclick
事件不會添加到我的div
。
只有一種方式將onclick
添加到我的項目中。 與下面相同:
list[z].setAttribute("onclick", "alert(\"hi\");");
但有更好的方法嗎?
有個更好的方法。 我的第一個錯誤是在頁面上加載所有元素之前使用 JavaScript。 要解決它,您必須在頁面加載結束時調用 element 或將您的 javascript 代碼放在您的項目結束時。 那么當您的元素存在於您的頁面中時,您的代碼將完全執行。
有關它的更多詳細信息,請參閱以下鏈接:
頁面加載后執行的 JavaScript
http://www.w3schools.com/jsref/event_onload.asp
我的第二個錯誤是受傷了:(
我有一個 div,它本身包含我所有的其他元素。 它的樣式display: none;
負載。 當我調用我的函數時,它顯示為 none 並且所有的 Thins 都運行良好(就像我的新樣式一樣)但是onclick
事件不起作用 :(( 我花了兩天時間來解決這個問題 :((
只是要小心你的元素不應該被display: none
當你向它添加你的onclick
事件時display: none
樣式。
那么您可以將這種類型的創建onclick
事件動態用於您的項目:
list[z].onclick = (function (e, test_msg) {
return function(e) {
sib(e, test_msg);
};
})(e, test_msg);
這是我所知道的最好的方法。 您可以管理事件處理程序並將您的參數也發送到您的函數。
我多次使用另一種方式在我的項目中動態添加onclick
事件。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.