In firefox console how can learn the inspector console to trigger click events on webpages.

Question

Are there any good resources for Javascript console triggers of buttons.

So far I learned I can press cmd+shift+c in mac to get element by clicking on the webpage this allows me to press esc to create a console line in the inspector/elements tab where I can type $0.click()

But I want to learn document.getElementById().click() or jquery methods or any method that will alliow me to click webpage links or send < > hotkeys to youtube player for example to make a javascript for elliptical tempo playback of music.

What is a good website to learn this stuff. I am avoiding stack exchange as they erase all my questions and do not help.

Answer 1

Hi Ember,

This is a great question! Using your web console to interact with a webpage is an excellent way to learn Javascript. Actually, eight years ago, the very first question I asked on Stack Overflow was down-voted. It's very discouraging, I know. Lets see if we can't get you some answers.

Before we start, I want to encourage you to understand the commands I am telling you to type into your JavaScript console, before you copy and paste them into your browser. A person with bad intentions can give you JavaScript that will do some very unpleasant things. So please, please, please, just don't copy and paste code that others give you without a good understand of what it does. For the examples below, please refer to the JQuery documentation on Class Selection, it can be found here https://api.jquery.com/class-selector.

As you mentioned, you can either use vanilla JavaScript or you can use JQuery. Vanilla just means basic, for example, your

document.getElementById();

would be considered vanilla JavaScript.

Whenever I am teaching someone web development I like to start them off with JQuery. Its less verbose and easier to read. Although, in this specific instance, you can access the 'clicked on' DOM element through $0, there is a more idiomatic way to access DOM elements. 

Lets look at this page right here as our first example. If you inspect this page ( cmd + shift + c, you can also right click on the page and select 'inspect'), you'll see the Inspector, Console, Debugger and a few other items. Navigate to your Console, once there you can see if JQuery is loaded by typing

$

and hitting enter.

The Console should return a function definition for JQuery, if it is enabled. The purpose of this function right now is not important, just that it does not give you an error. Since Wyzant uses JQuery - 3.5.0, we are able to use it to interact with this webpage.

Before we talk about how to click a button using JQuery, we need to figure out how to obtain a reference to that button. The first thing you will need to do is identify any IDs or Classes that are associated with your button. I see that Wyzant has a "Add comment" button under your question. If you click that with your mouse, a little text field should popup where you can type a comment. If you click it again, the text field goes away. This is the functionality we'll trigger in our console.

If we inspect the "Add comment" button we can see that it has two classes called "icon-container" and "toggle-handle". Lets use these to obtain a reference to this button.

To gain a reference to this button in your Console simply type

let commentButton = $('.icon-container.toggle-handle');

After you press enter, you will now have a reference to this button through JQuery. To initiate the click event, simply type

commentButton.click();

The comment text field should open and if you type it again and hit enter, it should close! Pretty cool, huh?

Now, to your last question, controlling a YouTube video from the console. The same rules apply. Navigate to a YouTube video, open your console and get a reference to the <video> object. In most cases that can simply be

let video = $("video"); 

 

Notice the missing period? This is because in the first example we were obtaining a reference to an object through a set of HTML Classes. Those require a preceding period to denote that you are referring to a class. Here we are obtaining a reference to any HTML <video> object on the page, since there is just one (usually), we will only get a reference to one.

Now you can manipulate the video, for example

video.playbackRate = 2.0;

will increase the speed of the playback to 2X

video.playbackRate = 1.0;

will return it to normal.

For more information on the <video> api, check out MDN @ developer.mozilla.org

Well, I hope this is helpful! Feel free to reach out to me any time if you have any more questions! 

Have a great one,

Josh