Categories
Action Changing JavaScript

JavaScript for optimizers #4: Replacing links with buttons

Our hypothetical case for this chapter is about replacing links with buttons. Our client’s research showed that the CTA buttons are usually better than links.

Business case: Replacing links with buttons

We use this insight to create a testing hypothesis:

“Because we saw that we are using links for our call to action, we expect that changing them to buttons will cause an increase in sales. We’ll measure this using conversion-rate.”

We are going to test this hypothesis with the following change: 

Here we show the that the code replaces links with buttons.
The script is for replacing links with buttons

Code

We will be replacing links with buttons by running the following JavaScript code on the testing page. Try it out for yourself to see how it works!

var singleLink = document.querySelector(".testLink1 > a");
var multipleLinks = document.querySelectorAll(".testLinks > a");

function replaceSingleLinkWithButton(link) {
  var newButton = document.createElement("button");
  var newButtonText = document.createTextNode(link.innerText);
  newButton.appendChild(newButtonText);
  var newButtonLink = link.getAttribute("href");
  var parentNode = link.parentNode;
  var newAnchor = document.createElement("a");
  newAnchor.setAttribute("href", newButtonLink);
  newAnchor.appendChild(newButton);
  parentNode.appendChild(newAnchor);
  link.remove();
}

function replaceMultipleLinksWithButtons(links) {
  for (var i = 0; i < links.length; i++) {
    var newButton = document.createElement("button");
    var newButtonText = document.createTextNode(links[i].innerText);
    newButton.appendChild(newButtonText);
    var newButtonLink = links[i].getAttribute("href");
    var parentNode = links[i].parentNode;
    newButton.setAttribute("style", "margin-right:5px;margin-bottom:5px;");
    var newAnchor = document.createElement("a");
    newAnchor.setAttribute("href", newButtonLink);
    newAnchor.appendChild(newButton);
    parentNode.appendChild(newAnchor);
    links[i].remove();
  }
}

replaceSingleLinkWithButton(singleLink);
replaceMultipleLinksWithButtons(multipleLinks);

Breakdown

New syntax

The breakdown starts by going over all the new syntax in the example. Future articles will not repeat any of the discussed syntaxes. All the explanations have a link to the complete documentation of the syntax if you need more information.

document.querySelectorAll(selector) is a method that returns an array of nodes that match the selector. Where the querySelector just selects the first node it matches, this will get everything it matches.

Here is an example of an array of nodes that gets returned.

[node1, node2, node3]

.getAttribute(attributeName) is a method that gets the value of an attribute that exists on a node. The type of attribute that will be returned as a value needs to be specified by entering a string as the argument. If the node does not have the attribute specified, it will return null or an empty string.

“href” is an example of an attributeName. This selects the href attribute of a node. You can use this for any type of attribute that is attached to a node.

.setAttribute(attributeName, value) is a method that sets an attribute value to a node. The first argument is a string that decides what attribute the method should set. The second argument will decide the value. If the attribute already exists, it will be overwritten. Otherwise, a new attribute will be added.

.remove() is a method that will remove a node from the DOM. This is different than hiding with .visibility or .display because those methods don’t remove the node.

for(start; condition; counter){loopBody} is a statement that loops a piece of code while the condition is false. Each time the code loops, it will recheck the condition.

var i = 0; is an example of a start. We start at the number zero when running our loop.

i < links.length is an example of a condition. This checks whether the value of the i variable is higher than the length of the links array.

< is the less-than operator. It returns true when the operand on the left is lower than the right operand.

.length is a property of an array. This will return the number of nodes in that array.

i++ is an example of a counter. The variable i gets incremented by the counter with each loop with the increment operator. This piece of code is equal to var i = i + 1.

The loopBody runs every loop until the i is bigger than the length of the array. Then it skips to the next piece of code.

array[i] is a way of accessing an array at a specific index. It will return the item that is at that specific position. The first item in the array is accessed by 0. Because the i variable keeps increasing by one in the loop, it can check the entire array.

[index0, index1, index2]

Logic

var singleLink = document.querySelector(".testLink1 > a");

We start by assigning the link with the class testLink1 to the variable singleLink. This is the variable that we are going to use in the function that changes a specific link.

var multipleLinks = document.querySelectorAll(".testLinks > a");

Then we save a bunch of links with the class testLinks in an array. We assign this array to the variable multipleLinks. We want to change all these links to buttons in one go by using our second function.

function replaceSingleLinkWithButton(link) {

This function takes a single link as the argument and replaces that link with a button.

var newButton = document.createElement("button");

First we create a button node with the createElement method and assign it to the variable newButton.

var newButtonText = document.createTextNode(link.innerText);

Then we create the text that we are going to add to the button with the createTextNode method. The text itself is extracted from the existing link with the innerText property.

newButton.appendChild(newButtonText);

After that, we append the text node to the newly created button by using the appendChild method. This will add the text to the newButton variable.

var newButtonLink = link.getAttribute("href");

We save the link URL to the variable newButtonLink.

var parentNode = link.parentNode;

In this line of code, we save the parent node of our links to the parentNode variable. This way, we know where to append our new anchors later.

var newAnchor = document.createElement("a");

Then we create an anchor element and assign it to the newly declared newAnchor variable.

newAnchor.setAttribute("href", newButtonLink);

We set the link of the anchor with the setAttribute method.

 newAnchor.appendChild(newButton);

We need to append our button element within the anchor element to make it clickable. We can do this with the appendChild method.

parentNode.appendChild(newAnchor);

Then we add our anchor element containing our button to the parent node. It will now be visible on the website.

link.remove();

Finally, we remove the original link from the DOM.

}

We close the function with a curly bracket.

function replaceMultipleLinksWithButtons(links) {

Then we start our second function that will accept an array of links and replaces all selected links with buttons simultaneously.

for (var i = 0; i < links.length; i++) {

First, we create a loop that runs the entire length of the array that is inserted as an argument when the function is called.

var newButton = document.createElement("button");

We create a new button again.

var newButtonText = document.createTextNode(links[i].innerText);

Here we create the button text just like the previous function. For the text we want the innerText of the current item in the array. We select this using the array selector.

newButton.appendChild(newButtonText);

We add the text to our button again.

var newButtonLink = links[i].getAttribute("href");

Here we get the link of the current item in the array with our array selector.

var parentNode = links[i].parentNode;

We save the parent node of our current item in the array with our array selector.

newButton.setAttribute("style", "margin-right:5px;margin-bottom:5px;");

To make the buttons stand out from each other, we add a style attribute to our button. This allows us to add CSS in the attribute value to change the style of our buttons.

var newAnchor = document.createElement("a");

Then we create an anchor element and assign it to the newly declared newAnchor variable.

newAnchor.setAttribute("href", newButtonLink);

We set the link of the anchor with the setAttribute method.

newAnchor.appendChild(newButton);

Then we append the button within the anchor again to make it clickable.

parentNode.appendChild(newAnchor);

Then we add our anchor element containing our button to the parent node. It will now be visible on the website.

links[i].remove();

Finally, we remove the current link in the array.

}

The loop is now finished and will run another time if the condition of the loop is false. When the condition is true, it will skip to the next line.

}

Then we end the second function.

replaceSingleLinkWithButton(singleLink);

We call the first function with our singleLink variable. The first link gets changed to a button.

replaceMultipleLinksWithButtons(multipleLinks);

We call the second function with our multipleLinks variable and are finished with replacing links with buttons on our webpage.

Exercise

The best way to learn JavaScript is to try it. I want you to change to code, so the text in the new buttons gets numbered. Check out the solution.

Here we show an example of the change that we want you to create with JavaScript.
The exercise example

The next article is featured on Convert:
JavaScript for Optimizers #5: Working With Input Fields