Removing: onclick, onmouseover, onmouseout from the html

JavaScript
1

How would I do this?

<style>
  .playButtons {
    white-space: nowrap;
    font-size: 0;
  }
  
  .playButton {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 83px;
    height: 44px;
    background-color: black;
    border-top: 3px solid #0059dd;
    border-bottom: 3px solid #0059dd;
  }
  
  .play,
  .pause,
  .speaker {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  
  .pause,
  .speaker {
    display: none;
  }
  
  .playButton.svoefm {
    border-left: 3px solid #0059dd;
    fill: #aaff00;
  }
  
  .playButton.soundpark {
    width: 88px;
    border-left: 3px solid #0059dd;
    border-right: 3px solid #0059dd;
    fill: #ffaa00;
  }
  
  .playButton.cavoparadisoclub {
    border-right: 3px solid #0059dd;
    fill: #ff00aa;
  }

</style>

<div class="playButtons">
  <div class="playButton svoefm" onclick="playButton(event)" onmouseover="showPause(event)" onmouseout="showSpeaker(event)">

    <svg class="play" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>

    <svg class="pause" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>


    <svg class="speaker" width="16" height="14" viewBox="0 0 16 14">
      <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
      fill-rule="evenodd"></path>
    </svg>

    <audio preload="none">
      <source src="http://getradio.me/svoefm" type="audio/mpeg">

    </audio>
  </div>

  <div class="playButton soundpark" onclick="playButton(event)" onmouseover="showPause(event)" onmouseout="showSpeaker(event)">

    <svg class="play" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>

    <svg class="pause" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>

    <svg class="speaker" width="16" height="14" viewBox="0 0 16 14">
      <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
      fill-rule="evenodd"></path>
    </svg>

    <audio preload="none">
      <source src="http://getradio.me/spdeep" type="audio/mpeg">

    </audio>
  </div>

  <div class="playButton cavoparadisoclub" onclick="playButton(event)" onmouseover="showPause(event)" onmouseout="showSpeaker(event)">

    <svg class="play" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>

    <svg class="pause" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>

    <svg class="speaker" width="16" height="14" viewBox="0 0 16 14">
      <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
      fill-rule="evenodd"></path>
    </svg>


    <audio preload="none">
      <source src="http://s5.onweb.gr:8488/;">

    </audio>
  </div>
</div>

<script>
  function getButton(el) {
    while (el.nodeName !== "HTML" && el.nodeName !== "DIV") {
      el = el.parentNode;
    }
    return el;
  }

  function playButton(event) {
    var button = getButton(event.target);
    var player = button.querySelector("audio");
    var play = button.querySelector(".play");
    var pause = button.querySelector(".pause");
    var speaker = button.querySelector(".speaker");
    button.classList.add("clicked");
    player.volume = 1.0;
    play.style.display = "none";
    speaker.style.display = "none";
    if (player.paused) {
      play.style.display = "none";
      pause.style.display = "inline-block";
      player.play();
    } else {
      play.style.display = "inline-block";
      pause.style.display = "none";
      player.pause();
    }
  }

  function showPause(event) {
    var button = getButton(event.target);
    var player = button.querySelector("audio");
    player.isPlaying = function() {
      return player.paused === false;
    }
    if (player.isPlaying()) {
      button.querySelector(".speaker").style.display = "none";
      button.querySelector(".pause").style.display = "inline-block";
    }
  }

  function showSpeaker(event) {
    var button = getButton(event.target);
    var player = button.querySelector("audio");
    player.isPlaying = function() {
      return player.paused === false;
    }
    if (player.isPlaying()) {
      button.querySelector(".pause").style.display = "none";
      button.querySelector(".speaker").style.display = "inline-block";
    }
  }

</script>
2

Read this: https://www.smashingmagazine.com/2013/11/an-introduction-to-dom-events/
Attempt it yourself and let us know how you get on.

2 Likes
3

With this one it’s not needed in the html section:

<style>
  .playButton3 {
    position: relative;
    display: inline-block;
    cursor: pointer;
    height: 44px;
    background-color: black;
    border-top: 3px solid #0059dd;
    border-bottom: 3px solid #0059dd;
  }
  
  .play3 {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
  }
  
  .pause3 {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: none;
  }
  
  .playButton3.svoefm {
    width: 83px;
    border-left: 3px solid #0059dd;
    fill: #aaff00;
  }
  
  .playButton3.soundpark {
    width: 88px;
    border-left: 3px solid #0059dd;
    border-right: 3px solid #0059dd;
    fill: #ffaa00;
  }
  
  .playButton3.cavoparadisoclub {
    width: 83px;
    border-right: 3px solid #0059dd;
    fill: #ff00aa;
  }
  
  .playButtons {
    white-space: nowrap;
    font-size: 0;
  }

</style>

<div class="playButtons">
  <div class="playButton3 svoefm">
    <svg class="play3" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>

    <svg class="pause3" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>

    <audio preload="none">
      <source src="http://getradio.me/svoefm" type="audio/mpeg">
      </source>
    </audio>
  </div>

  <div class="playButton3 soundpark">
    <svg class="play3" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>

    <svg class="pause3" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>

    <audio preload="none">
      <source src="http://getradio.me/spdeep" type="audio/mpeg">
      </source>
    </audio>
  </div>

  <div class="playButton3 cavoparadisoclub">
    <svg class="play3" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
    </svg>

    <svg class="pause3" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z"></path>
    </svg>

    <audio preload="none">
      <source src="http://s5.onweb.gr:8488/;">
      </source>
    </audio>
  </div>
</div>

<script>
  (function iife() {
    "use strict";

    function getButton(el) {
      while (el.nodeName !== "HTML" && el.nodeName !== "DIV") {
        el = el.parentNode;
      }
      return el;
    }

    function playButton3(event) {
      var button = getButton(event.target);
      var player = button.querySelector("audio");
      var play = button.querySelector(".play3");
      var pause = button.querySelector(".pause3");
      button.classList.add("clicked");
      player.volume = 1.0;

      if (player.paused) {
        play.style.display = "none";
        pause.style.display = "inline-block";
        player.play();
      } else {
        play.style.display = "inline-block";
        pause.style.display = "none";
        player.pause();
      }
    }


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

</script>
4

That’s right, because it’s done in a much better way from the end of the JavaScript code instead.

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

How would I adjust it?

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

It looks good to me.

8

It doesn’t work with the code added in.

9

It won’t because it’s being put in to a new and different environment.

10

What’s the solution, can it be done, or not?

11

Yes of course it can. When I get up tomorrow I’ll find a recent post that I made that gives some nicely detailed instructions on how it is done.

3 Likes
12

You have a syntax error. Open the dev tools in a decent browser (F12) and look at the console tab to find out what.

Also, it’d make your life (and that of everyone else who looks at the code) easier to use JSFiddle correctly. Put the HTML in the HTML pane, put the CSS (without the style tags) in the CSS pane and the JS (without the script tags) in the JS pane.

4 Likes
13

He’s unlikely to do that because he’s more interested in making it easier for him to copy is all at the same time from jsfiddle to blogger.

14

Here’s that recent post that I made giving some nicely detailed instructions on how to replace inline event handlers with more appropriate event listener techniques.

Replacing inline event handlers

3 Likes
15

Like this?

  
  var playButtons = document.querySelectorAll(".playButton");
    playButtons.forEach(function addPlayButtonHandler(el) {
      el.addEventListener("click", playButton, showPause, showSpeaker);
   });
  }());
16

Only the playButton function will be assigned, because addEventListener doesn’t work in the way that you wrote there. How addEventListener works is to accept a string for the … no - stop. There’s a much better way to explain.

addEventListener documentation

Go and read that to learn why what you did failed, and to learn how to properly use it.

4 Likes
17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.