如何通过浏览器控制台以编程方式单击按钮[代码内部]

Question

For some reason, I am able to click some links/buttons, but cannot for buttons/anything that has an onclick attribute. For example: my JavaScript code I input into the browser's console:

var o = document.getElementsByName("takepic"); 
for (var i = 0; i < 1000; i++){
    o.click();
    console.log(i);
}

I put console.log so I know what the browser is doing, and where it currently is at.

The html code on the page:

<form>
    <input type="button" value="Configure..." onclick="webcam.configure()">
    &nbsp;&nbsp;
    <input type="button" value="Take Snapshot" onclick="take_snapshot()" name="takepic">
</form>

So basically, I want to take rapid snapshots using the browser console, but when I enter in my code, I get this error:

TypeError: Object # has no method 'click'

When I do use the same code, say for re-adding friends on facebook, and I use this:

var o = document.getElementsByName("fbaddfriend_example"); 
for (var i = 0; i < o.length; i++){
    o[i].click(); 
    console.log(i);
}

It definitely works. I'm just trying to do the same with a button on a page, but with no avail.

Answer 1

Your problem is in the code you're typing into the console. You are using document.getElementsByName() , which will return an array of elements. You need to loop through those elements. You are doing this in your second code segment, but not your first.

var o = document.getElementsByName("takepic"); 
for (var j = 0; j < o.length; j++) {
    for (var i = 0; i < 1000; i++){
        o[j].click();
        console.log(i);
    }
}

Answer 2

Change the code to:

var o = document.getElementsByName("takepic"); 
for (var i = 0; i < 1000; i++){
// ---v
    o[i].click();
    console.log(i);
}

The variable o holds a collection of all retrieved elements. o[i] returns the element at position i .