click() function on input field using browser console

Question

I need to make a simulated click on input field using javascript in browser console. The site isn't mine.

I use the code:

document.getElementById('bets-stake-amount-1').click();

I have to click the element with this ID: bets-stake-amount-1 . I think that only option is to click with mouse button. I have tried to change the type of the field but it not work.

<div class="bet p-1 ng-star-inserted">  
    <div class="bet-icons pull-right">
        <a class="bet-remove ng-star-inserted">
            <span class="fa fa-times" title="Rimuovi">
            </span>
        </a>
    </div>
</div>
<div class="combis mt-2 mb-2">
    <app-betslip-input grouping="1" class="ng-star-inserted">
        <div class="radio p-1 ng-star-inserted">
            <div class="flex-row">
                <div class="input-group flex-col-7">
                    <input autocomplete="off" class="form-control text-right" tabindex="1" type="text" id="bets-stake-amount-1" readonly="">
                        <span class="input-group-addon ng-star-inserted">€
                        </span>
                </div>
            </div>
        </div>
    </app-betslip-input>
</div>

The output is undefined .

it's probably listeneing for an event other than click. could be `mousedown()` or `mouseup().` — I wrestled a bear once., Aug 28 '19 at 18:47
What exactly is the problem? What output do you expect and where? — Sebastian Simon, Aug 28 '19 at 18:47
When i click with mouse the page execute a change but with simulated click no — Fabio Putrino, Aug 29 '19 at 06:35

score 0 · Answer 1 · answered Aug 28 '19 at 19:13

In IE you have to confirm ActiveX after 1st console command (in local page tested), next time it works.

In FF & Chrome works without problems, but not sure how you recognize "pass" result. For example calling onclick in Chrome reports this error:

document.getElementById('bets-stake-amount-1').onclick()
VM49:1 Uncaught TypeError: document.getElementById(...).onclick is not a function
at :1:48

And without brackets return null as there is no method to call.

In IE you can see even focus by this command document.getElementById('bets-stake-amount-1').focus() and in FF you cannot get focus or cursor in at all. Also Chrome no change after focus, but it can show focus after entering by tab or mouse click.

Or for simple automation without test Frameworks there is also interesting https://www.tampermonkey.net/ — Jan, Aug 28 '19 at 19:15

score 0 · Answer 2 · answered May 28 '22 at 09:53

According to documentation https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text, the input field responds to two possible events: input and change. Okay, but how does this work you may ask?

Suppose that you have the following input field

<input value="0.005" autofocus="" name="price" placeholder="Amount">

All you have to do is to set a value (because this field responds to value change)

document.getElementsByName("price")[0].setAttribute("value", "10")

Then trigger the input event like this

document.getElementsByName("price")[0].dispatchEvent(new Event('input', {bubbles:true}));

This way it works to programatically launch events on input fields. Triggering the event without setting a value will not work, because remember, the input field reacts to changes of it's value. If there is no change, no event will happen.

Hope my answer will help others.

P.S.: Always remember to read the documentation carefully. Most of the times the answer to our questions is right there :)

Have a good day!

Rahul Vala · Answer 3 · 2019-08-28T18:49:17.157

-2

You can simulate a click to an element (by ID) with this code

document.getElementById('elementID').click();

other option is to use this code (https://stackoverflow.com/a/2706236/7584019)

if (el.fireEvent) {
el.fireEvent('on' + etype);
} else {
var evObj = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}

edited Aug 28 '19 at 18:49

answered Aug 28 '19 at 18:47

Rahul Vala

695
8
17

click() function on input field using browser console

3 Answers3