8

I have an element like this.

<g id="box_w" onclick="recordResponseKeyboard('W');" onmousedown="svgFill('W');" onmouseup="svgUnfill('W');"> 
    <rect fill="#FFFFFF" height="68.522" stroke="#FFFFFF" stroke-miterlimit="10" width="119.297" x="306.673" y="384.406"></rect> 
</g>

From the chrome console, I can do to locate the element.

document.getElementById('box_w')

If i call click event, 

document.getElementById('box_w').click()

It throws an error that click is not a function.

How to click on the element using console.?

KitKarson
  • 5,211
  • 10
  • 51
  • 73

2 Answers2

13

click() is a function that's only defined on HTML elements. Fortunately it's a convenience function and we can implement it ourselves pretty easily i.e.

document.getElementById('box_w').dispatchEvent(new Event('click'));

That's all the click() function does underneath the hood anyway.

Here's an example:

document.getElementById('box_w').dispatchEvent(new Event('click'));
<g id="box_w" onclick="alert('hi')"> 
    <rect fill="#FFFFFF" height="68.522" stroke="#FFFFFF" stroke-miterlimit="10" width="119.297" x="306.673" y="384.406"></rect> 
</g>
Robert Longson
  • 118,664
  • 26
  • 252
  • 242
1

Try to use onclick instead of click.

document.querySelector("g#box_w").onclick();

Remember that what we are doing here is calling the interface of the shape. So onclick needs to be defined in svg as it is in the question:

<g id="box_w" onclick="recordResponseKeyboard('W');"></g>
Maciej Sikora
  • 19,374
  • 4
  • 49
  • 50