Converting Inline-javascript to Javascript

JavaScript
499

Adding an event handler

In this case, you would put the addEventHandler function below the others:

function addEventHandler(selector, eventType, handler) {
    var el = document.querySelector(selector);
    el.addEventListener(eventType, handler);
}

Then you can create attach event handlers to the elements on the page:

Here’s the first one that needs to be done:

  <div class="playButton3 svoefm" onclick="playButton3(event)">

The code that assigns that event handler is:

addEventHandler(".playButton3", "click", playButton3);

And you can now remove the inline onclick attribute

<!-- <div class="playButton3 svoefm" onclick="playButton3(event)"> -->
<div class="playButton3 svoefm">

Test the code, and it all still works.

Adding another event handler

Moving on to the next one, we have soundpark:

<div class="playButton3 soundpark" onclick="playButton3(event)">

That one has the same class name as the one above. It is possible to do another addEventHandler line with a different selector, but it looks like all of them might have the same class name.

What do each of the HTML lines look like, that we are adding events to? This is going to get interesting.

A change of plans

The three sections of HTML code that we are adding event handlers for, are:

<div class="playButton3 svoefm">
...
<div class="playButton3 soundpark">
...
<div class="playButton3 cavoparadisoclub">

Those elements all have the same class name. We can just use querySelectorAll to get all of them, and a forEach loop to add the event handlers instead.

// addEventHandler(".playButton3", "click", playButton3);
var playButtons = document.querySelectorAll(".playButton3");
playButtons.forEach(function addPlayButtonHandler(el) {
    // each of those three HTML elements can be referenced in here
});

Making the function more generic

As we now have references to the HTML elements, instead of using selectors, an update needs to occur to the addEventListener function. Using a parameter of el (which is an industry-standard short name for element) instead of selector is a better choice here.

// function addEventHandler(selector, eventType, handler) {
function addEventHandler(el, eventType, handler) {
    // var el = document.querySelector(selector);
    el.addEventListener(eventType, handler);
}

If we really wanted to use querySelector, we can use that when passing in the first parameter instead. For example:

var someElement = document.querySelector("someSelector");
addEventHandler(someElement, "click", someFunction);

Dealing with elements are a more fundamental aspect than dealing with selectors, so it’s more useful for a function to deal with elements than selectors.

Using forEach to add event handlers

Now, we can finish things off by using only one line inside of that forEach loop, to assign the playButton3 function as the event handler for all of the elements with a playButton3 class name.

function addEventHandler(el, eventType, handler) {
    el.addEventListener(eventType, handler);
}
var playButtons = document.querySelectorAll(".playButton3");
playButtons.forEach(function addPlayButtonHandler(el) {
    addEventListener(el, "click", playButton3);
});

Removing duplication

That addEventListener looks to be doing very little now, and seems to be just passing the arguments on instead. The name of the function isn’t helping to make the code any easier to understand either.

Let’s remove that function and adjust the line that uses it.

var playButtons = document.querySelectorAll(".playButton3");
playButtons.forEach(function addPlayButtonHandler(el) {
    el.addEventListener("click", playButton3);
});

There. That’s better.

The important lesson here, is that when using the correct code structure, things become very easy indeed.

Finishing off the work

We can now put all of the scripting code in an IIFE wrapper (using lowercase iife for the function name because lowercase is more appropriate as a function name than is uppercase).

(function iife() {
    "use strict";
    ...
}());

We can now cut out all of the scripting code, put it in to jsbeautifier to tidy up the easy formatting issues, then transfer the result of that in to JSLint where some final issues can be dealt with, such as by removing unused functions.

One of the main benefits of using JSLint is that it helps you to remove bad habits that programmers generally have. As you are just getting started, it helps to instill good habits instead.

When that’s all happy, the code can be copied back in to jsfiddle, and it all works, it all looks good, it protects the global namespace, and it’s all good to go.

1 Like