[英]How do I get a created element (a button) to run a function?
This is the code I used to create the button: 这是我用来创建按钮的代码:
var dfom = document.createElement('div');
dfom.setAttribute("id","options");
dfom.innerHTML = "<input type=\"button\" value=\"Say HI\" onclick=\get()\ />";
dfom.style.padding = '10px';
document.body.insertBefore(dfom, document.body.firstChild);
The button is created fine; 按钮创建良好; it displays correctly.
它显示正确。 So to test it, I did this:
因此,为了进行测试,我这样做:
function get()
{
alert("HI");
}
However, when I click the button nothing happens. 但是,当我单击按钮时,没有任何反应。 Any help, please?
有什么帮助吗? Thanks!
谢谢!
If you want to write correct JavaScript code, then you should do it as follows: 如果要编写正确的JavaScript代码,则应按以下步骤进行操作:
var dfom = document.createElement("div"),
button = document.createElement("input");
button.type = "button";
button.value = "Say HI";
button.addEventListener("click", function() {
alert("HI");
}, false);
dfom.id = "options";
dfom.style.padding = "10px";
dfom.appendChild(button);
document.body.insertBefore(dfom, document.body.firstChild);
DEMO: http://jsfiddle.net/TKdYh/ 演示: http : //jsfiddle.net/TKdYh/
The \\
should be \\"
around get()
, but there are more considerations: namely the get
function actually has to be defined outside of onload
or another callback since it needs to be available globally. You would need a setup similar to this: 在
get()
周围, \\
应该是\\"
,但还有更多注意事项:实际上, get
函数必须在onload
或另一个回调之外定义,因为它需要全局可用。您将需要类似以下的设置:
http://jsfiddle.net/CZ2y4/ http://jsfiddle.net/CZ2y4/
...which defines get
outside of the onLoad
callback, which makes it available to onclick
. ...定义了
onLoad
回调之外的get
,使其可用于onclick
。
Also, use standard event bindings rather than onclick
: 另外,请使用标准事件绑定,而不要使用
onclick
:
dfom.innerHTML = "<input type=\"button\" value=\"Say HI\">";
dfom.firstChild.addEventListener('click', get);
The following works for me: 以下对我有用:
window.onload = function() {
var dfom = document.createElement('div');
dfom.id = "options";
dfom.innerHTML = '<input type="button" value="Say HI" onclick="get()">';
dfom.style.padding = '10px';
document.body.insertBefore(dfom, document.body.children[0]);
}
function get() {
alert("HI");
}
Some things to note: 注意事项:
For standard DOM properties, it's usually better to just set the property, don't use setAttribute as it is inconsistently implemented. 对于标准DOM属性,通常最好只设置属性,不要使用setAttribute,因为它实现不一致。
It's clearer to use single quotes for script and double quotes for makrup, that way you don't have to use as many backslashes to quote quotes 在脚本中使用单引号和在makrup中使用双引号更加清晰,这样您就不必使用太多的反斜杠来引用引号了。
Strictly, HTML attribute values only need to be quoted if they contain certain characters . 严格来说,HTML属性值仅在包含某些字符时才需要加引号。 It's easier to just quote them all rather than remember what that set of characters is.
只引用所有字符而不是记住那组字符是更容易的。 Browsers are also very tolerant so you can get away with unquoted characters that should be quoted in some browsers but not others.
浏览器也非常宽容,因此您可以不用在某些浏览器中应加引号的未加引号的字符,而在其他浏览器中则不能。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.