Converting Inline-javascript to Javascript

JavaScript
61 
var init = (function(togglePlayer) {
    function iife() {
        var button = document.querySelector(".playButton");
        var player = document.querySelector(".player");
        togglePlayer.init(button, player);
    }
    iife();
}(togglePlayer));
  </script>
62 
     }
    }
    function init(playButton, audioPlayer) {
        button = playButton;
        player = audioPlayer;
        images.getSVGIcons(button);

        player.volume = 1.0;

        button.addEventListener("click", togglePlayingHandler, false);
    }
    return {
        init
    };
}(images));
63 
     };
}(utils));
var togglePlayer = (function(images) {
    var button;
    var player;

    function isPlaying() {
        return player.paused === false;
    }
    function toggle() {
        if (isPlaying()) {
            player.pause();
            images.showIcon("play");
        } else {
            player.play();
            images.showIcon("pause");
        }
    }
    function togglePlayingHandler() {
        button.classList.add("triggered");
        toggle();
    }
    function showPauseHandler() {
        if (isPlaying()) {
            images.showIcon("pause");
        }

}
    }
    function init(playButton, audioPlayer) {
        button = playButton;
        player = audioPlayer;
        images.getSVGIcons(button);

        player.volume = 1.0;

        button.addEventListener("click", togglePlayingHandler, false);
    }
    return {
        init
    };
}(images));

var init = (function(togglePlayer) {
    function iife() {
        var button = document.querySelector(".playButton");
        var player = document.querySelector(".player");
        togglePlayer.init(button, player);
    }
    iife();
}(togglePlayer));
  </script>
64

Is any of that right?

I was trying to set up the base first.

And I understand, this isn’t the same code as the other one.

But parts of it can be used in this one too.

65

I’m working on a long reply.

66

I will use two examples here. One showing a simple transfer that retains the onclick attribute, and one showing a more appropriate transfer where the onclick attribute is no longer required.

A simple transfer from inline onclick to a JavaScript function

First for the simple transfer. For this example the onclick attribute will only contain one javascript statement, but this applies no matter how many statements there are in there.

Because you earlier got confused about HTML and JavaScript code, I will clearly indicate which ones are what.

The HTML code in this example that we will be converting is:

<div id="playButton" onclick="var button = document.getElementById('playButton');">

Down in the JavaScript section of JSFiddle, create a function for that onclick event.

function playButtonClickHandler() {

}

Cut out from the HTML code the contents of the onclick attribute between the double quotes:

<div id="playButton" onclick="">

And paste that cut-out content in to the JavaScript function that you created:

function playButtonClickHandler() {
  var button = document.getElementById('playButton');
}

Back to the HTML code, put playButtonClickHandler() in the onclick double quotes.

<div id="playButton" onclick="playButtonClickHandler()">

Lastly, in the JavaScript section of JSFiddle, press the config button at the top right of the JavaScript panel, and set the load type to “No wrap - in ”
If that’s left as onload or onready, the inline onclick event won’t be able to find the function name.

Using JavaScript to create the onclick event on the div

Starting again with the HTML

<div id="playButton" onclick="var button = document.getElementById('playButton');">

Down in the JavaScript section of JSFiddle, create a function for that onclick event.

function playButtonClickHandler() {

}

Cut out from the HTML code the contents of the onclick attribute between the double quotes:

<div id="playButton" onclick="">

And paste that cut-out content in to the JavaScript function that you created:

function playButtonClickHandler() {
  var button = document.getElementById('playButton');
}

That’s all the same as the first example.

Now below that function, get a reference to the HTML element on which you want to add an event.

var playButton = document.querySelector("#playButton");

And then below that, add an event listener to that element. You tell the event listener the type of event that you want, the function name that you want to run when that event occurs.

var playButton = document.querySelector("#playButton");
playButton.addEventListener("click", playButtonClickHandler);

Make sure that you don’t end playButtonClickHandler with parenthesis, otherwise it will only be the return value from that function that gets assigned to the event instead.

The full JavaScript that you end up with is the function, and the code to attach that function to the element.

function playButtonClickHandler() {
  var button = document.getElementById('playButton');
}
var playButton = document.querySelector("#playButton");
playButton.addEventListener("click", playButtonClickHandler);

You can now go back to the HTML code, and remove the onclick="" attribute, as it’s of no further use.

<div id="playButton">

You could also in the JavaScript section of JSFiddle, press the config button at the top right of the JavaScript panel, and set the load type to “No wrap - in ” but it’s not mandetory.
With the addEventListener technique, it’s flexible enough to work regardless of whether the load type is onLoad or no wrap in body.

1 Like
67 
<div class="playButton">

  <svg class="play hide" width="39" height="40" style="margin: 2px 284px;" viewbox="5 8 50 56">
    <path d="M30.001,12C16.767,12,6,22.765,6,35.999s10.766,23.999,24,23.999s24-10.765,24-23.999S43.235,12,30.001,12L30.001,12z" fill="#000000"></path>
    <path fill="#0059dd" d="M39.201,34.34l-12-9c-0.607-0.455-1.419-0.528-2.095-0.189c-0.677,0.339-1.106,1.031-1.106,1.789v18c0,0.758,0.428,1.45,1.106,1.789c0.283,0.142,0.589,0.211,0.894,0.211c0.425,0,0.847-0.136,1.2-0.4l12-9c0.503-0.377,0.8-0.97,0.8-1.6C40.001,35.31,39.705,34.717,39.201,34.34z"></path>
    <path fill="#0059dd" d="M30,15c11.598,0,21,9.402,21,20.999s-9.401,20.999-21,20.999c-11.599,0-21-9.402-21-20.999S18.401,15,30,15 M30,9C15.112,9,3,21.111,3,35.999s12.112,26.999,27,26.999c14.888,0,27-12.111,27-26.999S44.888,9,30,9L30,9z"></path>

  </svg>

  <svg class="pause hide" style="margin: 2px 284px;" width="39" height="40" viewbox="0 -3.4 24 24">
    <path d="M12.086,5.63 C10.705,5.63 9.586,6.748 9.586,8.13 C9.586,9.511 10.705,10.63 12.086,10.63 C13.467,10.63 14.586,9.511 14.586,8.13 C14.586,6.748 13.467,5.63 12.086,5.63"></path>
    <path d="M7.507,14.434 C7.135,14.183 6.787,13.896 6.472,13.58 C6.157,13.266 5.87,12.917 5.618,12.544 C5.367,12.174 5.15,11.775 4.972,11.356 C4.793,10.929 4.655,10.486 4.564,10.038 C4.47,9.579 4.422,9.105 4.422,8.63 C4.422,8.155 4.47,7.68 4.564,7.219 C4.655,6.772 4.793,6.329 4.972,5.905 C5.148,5.489 5.365,5.089 5.618,4.715 C5.868,4.344 6.155,3.996 6.472,3.68 C6.791,3.361 7.14,3.073 7.509,2.824 L8.625,4.485 C8.363,4.66 8.114,4.866 7.886,5.094 C7.66,5.32 7.454,5.57 7.275,5.834 C7.094,6.102 6.94,6.387 6.814,6.684 C6.687,6.986 6.589,7.301 6.524,7.619 C6.456,7.95 6.422,8.289 6.422,8.63 C6.422,8.97 6.456,9.309 6.524,9.638 C6.589,9.958 6.687,10.274 6.814,10.578 C6.941,10.874 7.095,11.159 7.274,11.423 C7.456,11.692 7.661,11.941 7.886,12.166 C8.111,12.392 8.361,12.597 8.627,12.777 L7.507,14.434"></path>
    <path d="M5.271,17.751 C4.688,17.357 4.14,16.905 3.643,16.408 C3.145,15.91 2.693,15.363 2.301,14.781 C1.903,14.193 1.562,13.564 1.286,12.912 C1.006,12.249 0.79,11.554 0.646,10.846 C0.497,10.121 0.422,9.376 0.422,8.63 C0.422,7.883 0.497,7.138 0.646,6.413 C0.791,5.704 1.006,5.009 1.287,4.347 C1.562,3.695 1.903,3.067 2.301,2.478 C2.696,1.894 3.147,1.347 3.643,0.851 C4.14,0.354 4.688,-0.098 5.271,-0.492 L6.39,1.166 C5.913,1.487 5.464,1.857 5.057,2.265 C4.651,2.671 4.281,3.119 3.958,3.598 C3.633,4.079 3.354,4.593 3.129,5.126 C2.9,5.667 2.723,6.234 2.605,6.815 C2.484,7.406 2.422,8.018 2.422,8.63 C2.422,9.241 2.484,9.853 2.605,10.445 C2.723,11.024 2.9,11.591 3.128,12.133 C3.354,12.666 3.633,13.18 3.958,13.662 C4.279,14.138 4.65,14.586 5.057,14.994 C5.464,15.402 5.913,15.772 6.39,16.093 L5.271,17.751"></path>
    <path d="M16.665,14.434 L15.545,12.777 C15.811,12.597 16.061,12.392 16.286,12.166 C16.511,11.941 16.716,11.692 16.897,11.425 C17.077,11.159 17.232,10.874 17.358,10.576 C17.485,10.274 17.583,9.958 17.648,9.64 C17.716,9.309 17.75,8.97 17.75,8.63 C17.75,8.289 17.716,7.95 17.648,7.621 C17.583,7.301 17.485,6.986 17.358,6.683 C17.232,6.387 17.078,6.102 16.897,5.834 C16.718,5.57 16.512,5.32 16.286,5.094 C16.058,4.866 15.809,4.66 15.547,4.485 L16.663,2.824 C17.032,3.073 17.381,3.361 17.7,3.68 C18.017,3.996 18.304,4.344 18.554,4.715 C18.807,5.089 19.025,5.489 19.2,5.904 C19.38,6.329 19.517,6.772 19.608,7.221 C19.702,7.68 19.75,8.155 19.75,8.63 C19.75,9.105 19.702,9.579 19.608,10.04 C19.517,10.486 19.38,10.929 19.2,11.354 C19.023,11.775 18.805,12.174 18.553,12.546 C18.302,12.917 18.015,13.266 17.7,13.58 C17.385,13.896 17.037,14.183 16.665,14.434"></path>
    <path d="M18.901,17.751 L17.782,16.093 C18.259,15.772 18.708,15.402 19.115,14.994 C19.523,14.586 19.893,14.138 20.214,13.662 C20.539,13.18 20.818,12.666 21.043,12.133 C21.273,11.591 21.449,11.024 21.568,10.445 C21.689,9.853 21.75,9.241 21.75,8.63 C21.75,8.018 21.689,7.406 21.568,6.814 C21.449,6.234 21.273,5.667 21.044,5.126 C20.818,4.593 20.539,4.079 20.214,3.597 C19.891,3.119 19.521,2.671 19.115,2.265 C18.708,1.857 18.259,1.487 17.782,1.166 L18.901,-0.492 C19.484,-0.098 20.032,0.354 20.529,0.851 C21.025,1.347 21.476,1.894 21.871,2.477 C22.269,3.067 22.61,3.695 22.886,4.347 C23.166,5.009 23.381,5.704 23.526,6.412 C23.675,7.138 23.75,7.883 23.75,8.63 C23.75,9.376 23.675,10.121 23.526,10.846 C23.382,11.554 23.166,12.249 22.885,12.912 C22.61,13.564 22.269,14.193 21.871,14.781 C21.479,15.363 21.027,15.91 20.529,16.408 C20.032,16.905 19.484,17.357 18.901,17.751"></path>
    <path d="M11.086,9.973 L13.086,9.973 L13.086,15.63 L11.086,15.63 L11.086,9.973 Z"></path>
  </svg>

</div>
68 
function playButtonClickHandler() {
  var button = document.getElementById('playButton');
}
var playButton = document.querySelector("#playButton");
playButton.addEventListener("click", playButtonClickHandler);
69

Now demonstrate that you understood the process well enough, to do it to other inline events of your code.

70

All I did was copy what you had, I didn’t demonstrate any know how.

This is confusing.

71

Then go through what I wrote slowly, taking your time to try and understand each part of it.

If you have questions about any of it, now’s the time to bring them up.

72

I don’t understand this.

73

Do you want to do it step by step with me leading you along by the hand, for each stage of the process?

74

Yes. .

75

Okay. What is the code that you will be starting with.

76 
<style>
    #playButton {
    width: 606px;
    height: 50px;
box-sizing: border-box;
    cursor: pointer;
    border: 3px solid #0059dd;
    background: linear-gradient( to right, transparent 0px, transparent 198px, #0059dd 198px, #0059dd 201px, transparent 201px, transparent 399px, #0059dd 399px, #0059dd 402px, transparent 402px);
</style>

.playButton.triggered {
    border: 3px solid #e77d19;
     background-image: linear-gradient(to right, #00ffff 0,#00ffff 198px,#0059dd 198px, #0059dd 201px, #ffffff 201px, #ffffff 399px, #0059dd 399px, #0059dd 402px, #ff00ff 402px);
77

I just started that part off.

78

I see no inline events or scripting code in what you pasted.

Provide a link please.

79

Overall, there are four main steps to the process of moving inline event code out to the scripting area.

  1. Create a function that will contain the code
  2. Move the inline event code in to that function
  3. Gain a reference to the HTML element
  4. Add an event listener to that element, for the event, with that function
1 Like
80