Javascript：单击注入按钮？

Question

My question may seem weird but I'd like my javascript code to click on a button I previously injected in the page with the same script. I tried something like this:

var injectionarea = document.getElementById('whereIwant');
injectionarea.innerHTML += "<button id=\"my_button\">Test</button>";

document.getElementById('my_button').onclick = function() {
                                                            //my stuff
                                                          };

my_button.click();

But it returns an undefined element...

Answer 1

There are some issues in what you're trying to do. As a general rule, injecting a dom control as a string can give some weird happenings (eg. any child node in the container element may revert to original page state). So it's better to create the object by document.createElement function.

Anyway, in your case, you simply need to "wait" that the dom reads your injection, parse it and create the element (things that you should done yourself, as stated above).

So, adding a setTimeout, like in the following example, would make it work, even if it's not the cleanest piece of code I would like to see:

var injectionarea = document.getElementById('whereIwant');
injectionarea.innerHTML += "<button id=\"my_button\">Test</button>";

setTimeout(function(){
   document.getElementById('my_button').onclick = function() {
                                                            //my stuff
                                                          };

   my_button.click();
},0);

Always remember that JS is single threaded, so any edit you make that need to be parsed by the DOM, would not be available in the DOM itself until you release your working thread.

Answer 2

try this:

function a(){
    var injectionarea = document.getElementById('whereIwant');
    injectionarea.innerHTML += "<button id=\"my_button\" onclick=\"doClick()\">Test</button>";
}
function doClick(){
//my stuff
}