Converting Inline-javascript to Javascript

JavaScript
549

it works. now remove onclick

550

Yes, those are now useless and can be removed.

551

I have a few issues in jslint.

552 
Unused 'showSpeaker'.

Undeclared 'document'.
    var playButtons = document.querySelectorAll(".playButton3");

Unused 'showPause'.
553

Run the code through JS Beautify first before sending it to JSLint.

JSFiddle uses non-standard 2-space indentation, whereas 4-space indentation is required by JSLint. So, using JS Beautify helps to clean that up for you.

554

2 are left to do:

We did this one:
Unused ‘playButton3’.
function playButton3(event) {
29.13

These are left to do:

Unused ‘showPause’.
function showPause(event) {

40.13
Unused ‘showSpeaker’.
function showSpeaker(event) {

555

Those aren’t used, so you can remove them.

556

oh yea, that’s right, I removed them from it.

557

Undeclared ‘document’.
var playButtons = document.querySelectorAll(".playButton3");


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

There is that [x] a browser checkbox, remember?

1 Like
559

ok, I can do the rest of that myself.

1 Like
561

What’s the purpose of having display none on the audio if by default if controls isn’t stated, then it’s not shown?

    <audio preload="none" style="display:none;">
      <source src='' type='audio/mpeg' />

I’m asking you cause you set this one up.

Controls

If this attribute is present, the browser will offer controls to allow the user to control audio playback, including volume, seeking, and pause/resume playback.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

<style>
  .playButton3 {
    display: inline-block;
    cursor: pointer;
    height: 44px;
    background-color: black;
    border-top: 3px solid #0059dd;
    border-bottom: 3px solid #0059dd;
    margin-top: 8px;
  }
  
  .play {
    width: 12px;
    height: 14px;
  }
  
  .pause {
    width: 10px;
    height: 14px;
    display: none;
  }
  
  .playButton3.svoefm {
    width: 83px;
    border-left: 3px solid #0059dd;
  }
  
  .playButton3.svoefm svg {
    fill: #aaff00;
  }
  
  .playButton3.soundpark {
    width: 88px;
    border-left: 3px solid #0059dd;
    border-right: 3px solid #0059dd;
  }
  
  .playButton3.soundpark svg {
    fill: #ffaa00;
  }
  
  .playButton3.cavoparadisoclub {
    width: 83px;
    border-right: 3px solid #0059dd;
  }
  
  .playButton3.cavoparadisoclub svg {
    fill: #ff00aa;
  }
  
  .playButtons {
    white-space: nowrap;
    font-size: 0;
  }

</style>

<div class="playButtons">
  <div class="playButton3 svoefm">

    <svg class="play" style="margin:15px 36px;" 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" style="margin:15px 37px;" 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" style="display:none;">
      <source src='http://163.172.187.253:8081/radio/svoefm/icecast.audio' type='audio/mpeg' />

      </source>
    </audio>
  </div>
  <div class="playButton3 soundpark">

    <svg class="play" style="margin:15px 39px;" 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" style="margin:15px 40px;" 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" style="display:none;">
      <source src='http://163.172.187.253:8081/radio/soundeep/icecast.audio' type='audio/mpeg' />

      </source>
    </audio>
  </div>
  <div class="playButton3 cavoparadisoclub">

    <svg class="play" style="margin:15px 36px;" 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" style="margin:15px 37px;" 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" style="display: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(".play");
      var pause = button.querySelector(".pause");
      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>
562

That’s a good point you raise. The display:none shouldn’t be on there.

If its controls were to be shown, then hiding it would best be achieved either by removing the controls setting, or by using a “hide” css class name.

1 Like
564

I find

indent with 4 spaces

On Here:

before sending it to Jslint works best.

1 Like
565

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