How does one programmatically click a button via the browser console [code inside]

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.

Yup, but for some reason SOF puts them in separate lines [which is pretty cool]. — Jeromie Devera, Feb 23 '14 at 18:33
Some element types do have a `click` method, some don't. See duplicate of [How to simulate mouse click using Javascript?](http://stackoverflow.com/questions/6157929/how-to-simulate-mouse-click-using-javascript) — Bergi, Feb 23 '14 at 18:42

score 10 · Answer 1 · answered Feb 23 '14 at 18:33

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);
    }
}

score 5 · Accepted Answer · answered Feb 23 '14 at 18:33

5

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.

answered Feb 23 '14 at 18:33

ComFreek

29,044
18
104
156

Nice, I should have tried adding that array of i to o. It works, but it clicks just once. It doesn't continue. an error spits out too: "TypeError: Cannot call method 'click' of undefined" EDIT: Oh, I think it's because i is being added 1 to it, and since there's only one element, i should just hardcode "1" in o[1].click() .... I'll try this out, and I'll get back to you – Jeromie Devera Feb 23 '14 at 18:37
@JeromieDevera if there is only one element, give it an id, and then use `document.getElementById()`. Then you don't have to worry about referencing an array index. Also, arrays are zero-indexed. If there is only one, the index is 0. – Bic Feb 23 '14 at 18:40
1

@JeromieDevera The loop runs 1000 times, but the array `o` contains fewer elements. Consider Bic's code which clicks each button 1000 times. – ComFreek Feb 23 '14 at 18:43
I added 0 since it was a 0 index (starts at 0) and it worked! Thanks for explaining further what the getElementsByName method really did. Really helped. – Jeromie Devera Feb 25 '14 at 15:13

How does one programmatically click a button via the browser console [code inside]

2 Answers2