Categories
JavaScript

JavaScript for optimizers #9: Adding and removing button icons

In this article, we are retaking a look at icons like the previous article. Sometimes changing the icon isn’t enough. What if you need to remove or add an icon? Our hypothetical case for this chapter is about adding and removing button icons.

Business case: Adding and removing buttons icons

In this hypothetical scenario, we arrive at the following hypothesis:

“Because we saw that icons should only be used when visitors don’t have to learn them, we expect that removing irrelevant icons and adding relevant icons will cause an increase in sales. We’ll measure this using conversion-rate.”

To test this hypothesis, we’re going to apply the changes below:

We are adding and removing button icons
We are adding and removing button icons

The code used in the experiment

Now for the fun part! 

To execute the change, we run the following JavaScript code on the testing page. Try it out for yourself to see it in action!

var getSubscribeButton = document.querySelector(".subscribe > div > a");
var getRegisterButton = document.querySelector(".register > div > a > i");
var newIconSubscribeButton = document.createElement("i");
newIconSubscribeButton.setAttribute("style", "padding-right:5px;");
newIconSubscribeButton.setAttribute("class", "fas fa-envelope-open-text");
getSubscribeButton.prepend(newIconSubscribeButton);
getRegisterButton.style.display = "none";

Breakdown of the code

1. New syntax

The breakdown starts by going over all the new syntax in the example above. Since this article is part of a series, make sure you check the syntax’s complete documentation in the previous articles.

.setAttribute(“style”, “padding-right:5px;”) is a method that we have used before. It is similar to the .style method. Instead, we just add the style attribute and insert our CSS. This way will allow you to add multiple lines of CSS in a single statement.

.setAttribute(“class”, “fas fa-envelope-open-text”) can be used as an alternative to the .classList.add() method. We simply add the class attribute to the element and replace all the current classes with our new classes. This way, we can add multiple classes in a single statement.

.prepend(node) is a ParentNode method that inserts nodes as the first child of the targeted element. The .append is similar to this method. The main difference is that .append adds the element as the last child of the selected element.

The method inserts the element before the first child
The method inserts the element before the first child

2. Logic

The goal of this code is divided into two parts. First, we want to add an email icon to the subscribe button. Then we remove the cash registry icon from the register button.

var getSubscribeButton = document.querySelector(".subscribe > div > a");

We always start with declaring and assigning our variables. We declare the variable getSubscribeButton with the var keyword. Then we find the subscribe button with the querySelector method. 

The selector finds the .subscribe class and selects this element. Then it finds the first div inside the selected element. 

Finally, it gets the anchor element that is in that element. This anchor element is the button. We assign the button to our newly declared variable.

var getRegisterButton = document.querySelector(".register > div > a > i");

In this line, we declare our second variable getRegisterButton with the var keyword. The register button is also selected with the querySelector method. 

The selector finds the element with the class .register. Here it looks for the first child div. It dives deeper to find the first anchor element. 

Because we want to remove the icon, we need to select the icon and not the button. Therefore we dive down one more time to select the I element. 

The button icon is now selected. We assign the icon to the newly declared getRegisterButton variable.

The following four lines of code are about adding the icon to the subscribe button.

var newIconSubscribeButton = document.createElement("i");

Before we can add our element we need to create it. We start by declaring the newIconSubscribeButton variable. 

Then we create a new I element with the createElement method. We insert the string “i” into the method, so the element knows what needs to be created.

We assign a newly created element to the newIconSubscribeButton variable.

newIconSubscribeButton.setAttribute("style", "padding-right:5px;");

We want to add a little bit of padding on the right side of the icon to make it look a little nicer. We select the subscribe button using our newIconSubscribeButton variable. 

Then we add the padding by using the .setAttribute method to insert a style element with the value “padding-right:5px;”.

Subscribe button without padding
Subscribe button without padding
Subscribe button with padding
Subscribe button with padding

Remember that change is not visible at this point, so we need to visualize these changes in our heads.

newIconSubscribeButton.setAttribute("class", "fas fa-envelope-open-text");

The I element is not an actual icon yet. We create the icon by adding a class that corresponds with the e-mail icon in the font-awesome library. First, we select the I element by using the newIconSubscribeButton variable. We set the classes with the setAttribute method.

getSubscribeButton.prepend(newIconSubscribeButton);

With our icon element created, we can add it to the DOM using the .prepend method. We want to add our icon before the text that is in the button. Because the first child of the button is the text node, it will prepend the icon before the text.

First, we select the subscribe button using the getSubscribeButton variable. Then we add the icon to the DOM by prepending the newIconSubscribeButton variable.

Our new icon is now visible in the browser
Our new icon is now visible in the browser
getRegisterButton.style.display = "none";

The final line of the code hides the icon from the browser by using the .style method. We use the display = “none” method, so the removed icon does not take up any space. This way will make sure that the text will remain centered. You are now done with adding and removing button icons.

Using the display = “none” method centers the text
Using the style.visibility = “hidden” method would make the button look weird

3. Exercise

The best way to learn JavaScript is to try it. 

I want you to change the code to add the icon to the right side of the button text. Make sure you don’t forget the padding. Shoot me a message to let me know what you think! Check out the solution.

Add the icon to the right side of the subscribe button
Add the icon to the right side of the subscribe button

I posted the next episode on Convert:

JavaScript for Optimizers #10: Adding a DateTime Picker

New resource: How to win your first a/b test on a zero budget?

A zero budget conversion optimization process with Google Optimize and JavaScript.

Download now