youtube - How do I simulate a click on a div with javascript - Stack Overflow

admin管理员组

文章数量:1398187

I am looking for a way to be able to rig a shortcut to a youtube controll button. I want to be able to click on the left and right arrow to activate "Previous video" and "Next video" on a playlist. I used to be easily able to do it myself, but they made some changes and since those I can't quite replicate what i used to have working.

I use the Google Chrome Shortkey Plug-in to manage my short cut keys. I make the right key execute a javascript code only on "*"

The problem reside in the script to execute. I used to simply do a document.getElementById but now they use class instead of id and I cant get it to work. Their buttons are divs and they go like this:

<div class="ytp-button ytp-button-prev" role="button" aria-label="Previous" tabindex="6050" style="display: inline-block;">
</div>
<div class="ytp-button ytp-button-next" role="button" aria-label="Next" tabindex="6051" style="display: inline-block;">

My code actualy es from another Stackoverflow Question

Still, if I put all of that together to make the folowing code it doesn't work.

simulate(document.getElementsByClassName("ytp-button ytp-button-prev"), "click");

I am looking for a way to be able to rig a shortcut to a youtube controll button. I want to be able to click on the left and right arrow to activate "Previous video" and "Next video" on a playlist. I used to be easily able to do it myself, but they made some changes and since those I can't quite replicate what i used to have working.

I use the Google Chrome Shortkey Plug-in to manage my short cut keys. I make the right key execute a javascript code only on "https://www.youtube.*"

The problem reside in the script to execute. I used to simply do a document.getElementById but now they use class instead of id and I cant get it to work. Their buttons are divs and they go like this:

<div class="ytp-button ytp-button-prev" role="button" aria-label="Previous" tabindex="6050" style="display: inline-block;">
</div>
<div class="ytp-button ytp-button-next" role="button" aria-label="Next" tabindex="6051" style="display: inline-block;">

My code actualy es from another Stackoverflow Question

Still, if I put all of that together to make the folowing code it doesn't work.

simulate(document.getElementsByClassName("ytp-button ytp-button-prev"), "click");

• javascript
• youtube
• keyboard-shortcuts

Share Improve this question Follow edited May 23, 2017 at 10:29 CommunityBot 111 silver badge asked Jan 4, 2015 at 22:59 Samuel CharpentierSamuel Charpentier 60922 gold badges99 silver badges2929 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 1

getElementsByClassName returns an array, since you can have multiple elements with the same class name. You can pick them by document.getElementsByClassName("ytp-button ytp-button-prev")[index]

jQuery is not the best solution for all our projects, but for simulate events it's not bad option

(function($){
    $('.element').click();
    // same for others ex: $('.element').keyup();
})(jQuery);

example: http://jsfiddle/h0po3q3w/

If you are using jQuery, you can target the element then trigger a click event like this:

$( ".ytp-button-prev" ).trigger( "click" );

Jason has your answer, but an alternative is to use document.querySelector. If there is only one button with those classes, or you want the first one, then:

var button = document.querySelector('.ytp-button.ytp-button-prev');

本文标签： youtubeHow do I simulate a click on a div with javascriptStack Overflow