Javascript click on query selector

Question

Here is javascript code.

document.querySelectorAll("li[class='user selected']")

I wanna click on this element but this code does not work

document.querySelectorAll("li[class='user selected']").click();

How can I click on this element ? Thanks.

Edit : this is Html code

<ul class="search" id="typeahead_list_u_0_2" role="listbox">
<li class="user selected" title="Special Username" aria-label="Special Username" role="option" aria-selected="true" id="js_g">
<a href="https://..." rel="ignore" target=""><img alt="" src="https://...">
<span class="text">Special Username</span>
</a>
</li>
</ul>

querySelectorAll will return you array of selected element. Not the first match. Use querySelector instead — Vigneswaran Marimuthu
– Vigneswaran Marimuthu, Commented May 4, 2015 at 13:09
Actually it works fine when I want to return first element but the problem is click event, I can not click . — El Juego
– El Juego, Commented May 4, 2015 at 13:12
If you add HTML code, i can have a look at it and can suggest. Try to put the code in fiddle and share it. — Vigneswaran Marimuthu
– Vigneswaran Marimuthu, Commented May 4, 2015 at 13:13
I have updated html code, do you want me to add more html codes ? — El Juego
– El Juego, Commented May 4, 2015 at 13:40
This is good enough. So, at time, you will have only one li element with class user selected ? Or many li elements will have that class ? — Vigneswaran Marimuthu
– Vigneswaran Marimuthu, Commented May 4, 2015 at 13:43

Vigneswaran Marimuthu · Accepted Answer · 2015-05-04 13:48:17Z

2

Remove the sample click listener that i have attached.

var element = document.querySelector("li[class='user selected']");

if (element) {
    
    // TODO: Attaching sample click listener. Remove it.
    element.addEventListener('click', function () {
        alert('Clicked');
    }, false);
    
    element.click();

}

<li class="user selected" title="Special User Name" aria-label="Special User Name" role="option" aria-selected="true" id="js_x"></li>

answered May 4, 2015 at 13:48

Vigneswaran Marimuthu

2,54216 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

El Juego Over a year ago

Thanks for your effort, But it does not work , I do not know what is wrong.

Vigneswaran Marimuthu Over a year ago

How are you attaching click listener ?

El Juego Over a year ago

I have updated my html code again, maybe something is wrong with my code

Vigneswaran Marimuthu Over a year ago

So, you are trying to redirect the user to the URL specified in href of anchor tag ?

El Juego Over a year ago

I am trying to add my friends into a fb group by code. I type name automatically but I can not pick or click on element.

Pedro Lobito · Accepted Answer · 2015-05-04 13:13:22Z

1

Have you tried ?

document.querySelectorAll("li[class='user selected']")[0].click();

Will click on the first ([0]) li[class='user selected']

answered May 4, 2015 at 13:13

Pedro Lobito

99.8k36 gold badges274 silver badges278 bronze badges

1 Comment

El Juego Over a year ago

yeah I have tried, It does not work. When I try this code I get an error message "Uncaught TypeError: Cannot read property '0' of nullmessage: "Cannot read property '0' of null"stack: (...)get stack: function () { [native code] }set stack: function () { [native code] }__proto__: Error(anonymous function) ..."

Collectives™ on Stack Overflow

Javascript click on query selector

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related