Use JavaScript to click a button for you

Jesse — Tue, 16 Jun 2020 18:59:27 +0000

So let's say you have a button on your website that you want to click a bunch of times for completely ethical purposes..

I'm going to show you how to do just that with 8 lines of code.

Let's get started

Write a function



function myFunction() {

}

Select the button and assign to variable

There are going to be two ways to do this.

Select by ID

var button = document.getElementByID('mybutton');

Select by Class

var button = document.getElementsByClassName('mybutton')[0];
In this example above, I select the first element using the class name specified using [0].

Checking in

Your code should look like this now:



function myFunction() {
    var button = document.getElementByID('mybutton');
}

For loop

Next thing to do is setup a for loop. I could easily write a whole post on these but here's the syntax and a quick breakdown:
for (i = 0; i < 20; i++) {

Click the button

Finally, inside your for loop, you can tell your function to click the button using .click().
button.click();

End result



function myFunction() {
    var button = document.getElementByID('mybutton');
    for (i = 0; i < 20; i++) {
        button.click();
    }
}
// Run the function:
myFunction();

Control text excerpt length with JavaScript

Jesse — Mon, 15 Jun 2020 22:10:12 +0000

Why not use CSS?

The CSS version works just fine and there are actually a couple ways you can pull it off. But, it feels like a bit of a "hack" to me. Using JavaScript feels more purposeful and makes a little more sense in my opinion.

Let's get started

Write a function

function myFunction() {

The string

You'll need to assign a variable for your string. For this example, I'll write the string in:
var str = "Killua Zoldyck is the best friend of Gon Freecss";

If you're trying to pull all excerpts in your blog, you'll need to find the class name used and call that in:
var str = document.getElementByClassName("my_excerpt");

The output

Next, you'll need to define a space to insert your excerpt in the HTML:
var output = document.getElementById("excerpt_area");

The if statement

The first thing we want to do here is decide our character length. For this example, we'll set it to 10 characters.
So, let's start by checking if our string is greater than 10 characters using .length:
if (str.length > 10) {

Next, let's tell our function what to do if that criteria is met. We'll need to only show part of the string using .substring() which requires two arguments: a start and end point in the string. We'll tell it to start at character 0 and end at character 10:
str = str.substring(0,10);

Optional:
I like to show the user that we're clipping the text by adding three periods. We can simply add on to our if statement:
str = str.substring(0,10) + "...";

Lastly, we can close our if statement.

Showing the excerpt

Using the output variable we defined, we can use .innerHTML to print our excerpt:
output.innerHTML = str;

We place this outside the if statement so that any excerpts below 10 characters will still be shown in the HTML.

The end result should show: "Killua Zol..."

Full code snippet:

function myFunction() {
    var str = "Killua Zoldyck is the best friend of Gon Freecss";
    var output = document.getElementById("excerpt_area");
    if (str.length > 10) {
        str = str.substring(0,10) + "...";
    }
    output.innerHTML = str;
}

DEV Community: Jesse

Use JavaScript to click a button for you

Let's get started

Write a function

Select the button and assign to variable

Select by ID

Select by Class

Checking in

For loop

Click the button

End result

Control text excerpt length with JavaScript

Why not use CSS?

Let's get started

Write a function

The string

The output

The if statement

Showing the excerpt

Full code snippet: