A simple .click() not working in Javascript

Question

I am trying to click a div with Javascript. I can use Jquery. After I select the element using QuerySelector or XPath and use .click() on the element, it doesn't actually end up clicking the div and does nothing.

document.querySelector('.GriddyLayout > div:nth-child(1)').click()

The website I am trying it on is here. Running the code above in the Javascript console is not selecting the option for some reason. Does anyone know how to click this button (div) with JS so that it actually clicks? Will upvote all answers, and accept the one that works best/first.

Did you try jquery way? $('.GriddyLayout > div:nth-child(1)').click(); — Pedram
– Pedram, Commented Dec 10, 2017 at 7:13
<div class="SelectableTile TEXT MULTIPLE_CHOICE natural" role="radio" aria-checked="false" style="width: 90px; height: 50px;" id="yui_3_14_0_1_1512889344567_1009"><div class="TileSkinBare CENTER MIDDLE"><div class="GeneticallyModified"><div id="yui_3_14_0_1_1512889344567_868">28</div></div></div></div> — whackamadoodle3000
– whackamadoodle3000, Commented Dec 10, 2017 at 7:21
What about just: document.querySelector('.GriddyLayout > div')? Your selector seems redundant. — Carl Edwards
– Carl Edwards, Commented Dec 10, 2017 at 7:22

A. Wolff · Accepted Answer · 2017-12-10 07:47:01Z

4

You need to trigger some events in specific sequence. In javascript, you could use:

var targetNode = document.querySelector('.GriddyLayout > div:nth-child(1)');

triggerMouseEvent(targetNode, "mousedown");
triggerMouseEvent(targetNode, "mouseup");
triggerMouseEvent(targetNode, "click");

function triggerMouseEvent(node, eventType) {
  var clickEvent = document.createEvent('MouseEvents');
  clickEvent.initEvent(eventType, true, true);
  node.dispatchEvent(clickEvent);
}

edited Dec 10, 2017 at 7:47

answered Dec 10, 2017 at 7:42

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

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

2 Comments

Miro Over a year ago

@A. Wolff How did you figure out that it requires all mousedown, up and then click?

A. Wolff Over a year ago

@Miro By inspecting, using chrome's inspector, the fired events on element's click. This is btw a classic way to avoid some bot's click. Google is using this kind of trick too BUT very more complex

Manikant Gautam · Accepted Answer · 2017-12-10 07:41:03Z

1

You can achieve this by using plain JavaScript.

var divs = document.getElementsByClassName("GriddyLayout");
 for(var i = 0; i < divs.length; i++){
  divs[i].addEventListener('click', function() {
  console.log('clicked' +"  "+this.innerHTML);
});
}

function callClickEvents() {
for(var i = 0; i < divs.length; i++){
  divs[i].click();
}
}

setTimeout(function(){ callClickEvents() }, 100);

// click nth element i.e 3rd (2+1)
divs[2].click(); 
console.log("Now click all divs");

<div class="GriddyLayout">hello 1</div>
<div class="GriddyLayout">hello 2</div>
<div class="GriddyLayout">hello 3</div>
<div class="GriddyLayout">hello 4</div>
                 .
<div class="GriddyLayout">hello n</div>

edited Dec 10, 2017 at 7:41

answered Dec 10, 2017 at 7:14

Manikant Gautam

3,5911 gold badge20 silver badges30 bronze badges

6 Comments

whackamadoodle3000 Over a year ago

That is the wrong element. It doesn't refer to the button, it refers to the group of buttons

Miro Over a year ago

Maybe: document.getElementsByClassName('GriddyLayout')[0].firstElementChild.click();

whackamadoodle3000 Over a year ago

document.getElementsByClassName('GriddyLayout')[0] is not the right element. I already tried the parents and children

Miro Over a year ago

What's weird that you don't have jquery but sizzle works. For example $('.GriddyLayout > div:nth-child(1)').className += " selected"; works. But there is not click() function.

Miro Over a year ago

@manikant check the website he linked. He's trying to "click" an answer without jQuery.

|

cdoshi · Accepted Answer · 2017-12-10 07:42:52Z

1

try this:document.querySelector('.GriddyLayout > div:nth-child(1)').addEventListener('click', function() { console.log('clicked') })

edited Dec 10, 2017 at 7:42

answered Dec 10, 2017 at 7:16

cdoshi

2,8321 gold badge15 silver badges21 bronze badges

5 Comments

cdoshi Over a year ago

I tried on your site and it is working. Based on your code, it means that only the first option when clicked will log 'clicked'

cdoshi Over a year ago

Check the screenshot attached, It's strange that it is not working for you. When are you attaching the eventlistener?

whackamadoodle3000 Over a year ago

Huh... That is weird. It doesn't work for me... It doesn't even say clicked

cdoshi Over a year ago

Make sure you are not attaching the eventlistener before the element is present in the DOM

whackamadoodle3000 Over a year ago

But it would error if that happened because the element would not be visible. However, it did not error in my case, which means that it is a different problem

Optimizer · Accepted Answer · 2017-12-10 09:10:25Z

1

Change selector to .GriddyLayout > div.SelectableTile:nth-child(1). You aren't using jQuery.

With javascript

document.querySelector('.GriddyLayout > div.SelectableTile:nth-child(1)').addEventListener('click', function() {console.log('clicked');} );

With jQuery

jQuery('.GriddyLayout > div.SelectableTile:nth-child(1)').click(function() { console.log('clicked');});

edited Dec 10, 2017 at 9:10

answered Dec 10, 2017 at 9:03

Optimizer

7478 silver badges7 bronze badges

1 Comment

whackamadoodle3000 Over a year ago

This does not click the div, it justs adds an event listener for when the div is clicked.

Collectives™ on Stack Overflow

A simple .click() not working in Javascript

4 Answers 4

2 Comments

6 Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

6 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related