How to click svg using querySelector?

I am trying to build an chrome extension to click a svg on a webpage using below command but it shows that "click" is not a function.

Can anyone give me some direction in order to solve this issue?

document.querySelector("div[class^='SubmitChat__SubmitButton']").querySelector("svg > path(0)").click();

Html Code:

<form class="SubmitChat__SubmitChatWrapper-kLTVjd ezNulO">

    <div id="PinToTop" style="display: none; border: groove; margin: 5px; padding: 5px;"></div>

    <div class="DefaultComments__DefaultCommentsWrapper-drohEF dbvkCO">

        <div class="SubmitChat__TextAreaWrapperBox-ijaLYA uQa-DJ">
        <textarea data-track-category="Interaction_Comment" data-track-action="click" data-track-name="field_comment"  class="SubmitChat__TextAreaWrapper-cEDMAF joGtiU" style="height: 44px;"></textarea>
        </div>

        <div class="SubmitChat__SubmitButton-kXYuum kSQpDq">
            <span class="isvg loaded SubmitChat__SendMessageIcon-hzVurU lcJXRC">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                    <path d="M25.305 16.07L7.503 24.307a.802.802 0 01-1.111-.925l1.923-7.493h0L6.392 8.396a.8.8 0 011.111-.925l17.802 8.236a.2.2 0 010 .363zm-16.638-.181h16" fill="none" stroke="#28232D" stroke-linecap="round" stroke-width="1.5">
                    </path>
                </svg>
            </span>
        </div>
</div>

</form>

1 thought on “How to click svg using querySelector?”

  1. You can’t really click an svg path but here is a solution:

    const pathElem = document.querySelector("div[class^='SubmitChat__SubmitButton'] svg > path")
    
    pathElem.onclick = () => console.log("clicked")
    
    pathElem.dispatchEvent(new Event("click"))
    pathElem.dispatchEvent(new Event("click"))
    <form class="SubmitChat__SubmitChatWrapper-kLTVjd ezNulO">
        <div id="PinToTop" style="display: none; border: groove; margin: 5px; padding: 5px;"></div>
        <div class="DefaultComments__DefaultCommentsWrapper-drohEF dbvkCO">
            <div class="SubmitChat__TextAreaWrapperBox-ijaLYA uQa-DJ">
            <textarea data-track-category="Interaction_Comment" data-track-action="click" data-track-name="field_comment"  class="SubmitChat__TextAreaWrapper-cEDMAF joGtiU" style="height: 44px;"></textarea>
            </div>
            <div class="SubmitChat__SubmitButton-kXYuum kSQpDq">
                <span class="isvg loaded SubmitChat__SendMessageIcon-hzVurU lcJXRC">
                    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
                        <path d="M25.305 16.07L7.503 24.307a.802.802 0 01-1.111-.925l1.923-7.493h0L6.392 8.396a.8.8 0 011.111-.925l17.802 8.236a.2.2 0 010 .363zm-16.638-.181h16" fill="none" stroke="#28232D" stroke-linecap="round" stroke-width="1.5">
                        </path>
                    </svg>
                </span>
            </div>
      </div>
    </form>

    Note that .click() works with HTML but not SVG elements. MDN

    Also note that the click event handler in your case is probably not listening on the path element but rather on the svg, div or span tag.

    Reply

Leave a Comment