Converting Inline-javascript to Javascript

JavaScript
1

I have 4 to do. Hopefully, if I’m able to get the hang of this, I’ll be able to do others on my own.

Code 1

<style>
    #playButton {
    width: 606px;
    height: 50px;
box-sizing: border-box;
    margin-top: 8px;
    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>

<div id="playButton" onclick=" 
var button = document.getElementById('playButton');
var player = document.getElementById('player');
  document.querySelector('#playButton .initial').style.display='none';
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton .pause').style.display='inline-block';
document.querySelector('#playButton .play').style.display='none';
    playButton.style.background = 'linear-gradient(to right, #00ffff 0,#00ffff 198px,#0059dd 198px, #0059dd 201px, #ffffff 201px, #ffffff 399px, #0059dd 399px, #0059dd 402px, #ff00ff 402px)';
player.play();
} else {
document.querySelector('#playButton .play').style.display='inline-block';
document.querySelector('#playButton .pause').style.display='none';
    playButton.style.background = 'linear-gradient(to right, transparent 0, transparent 198px,#0059dd 198px, #0059dd 201px, transparent 21px, transparent 399px, #0059dd 399px, #0059dd 402px, transparent 402px)';

player.pause();
}">

  <svg class="initial" 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" style="display:none;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>

  <svg class="play" style="display:none; margin: 2px 284px;" width="39" height="40" 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>

</div>

<audio id="player" preload="none" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>

Code 2

<div style="visibility: hidden; position: absolute">
  <img style="visibility: hidden; position: absolute" src="https://i.imgur.com/6hcP0IA.jpg" width="260" height="260" aria-hidden="true" alt="" />
</div>

<style>
    #playButton2 {
    margin-top: 8px;
    width: 266px;
    height: 266px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, #000000 86px, #000000  174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("http://via.placeholder.com/260x260");
background-repeat: no-repeat;
box-sizing: border-box;
    border: 3px solid #0059dd;
  }

</style>

<div id="playButton2" onclick=" 
        var button = document.getElementById('playButton2');
        var player = document.getElementById('player2');
          document.querySelector('#playButton2 .initial').style.display='none';
        player.volume=1.0; if (player.paused) {
    playButton2.style.border='3px solid #e77d19';
    playButton2.style.background = 'linear-gradient(to right, transparent 0, transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px,transparent 260px), url(\'http://via.placeholder.com/260x260\')';
        document.querySelector('#playButton2 .pause').style.display='inline-block';
        document.querySelector('#playButton2 .play').style.display='none';
        player.play();
        } else {
    playButton2.style.border='3px solid #e77d19';
    playButton2.style.background = 'linear-gradient(to right,transparent 0, transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px,transparent 260px), url(\'http://via.placeholder.com/260x260\')';
  document.querySelector('#playButton2 .pause').style.display='none';
  document.querySelector('#playButton2 .play').style.display='inline-block';
        player.pause();
        }" onmouseover="
var player = document.getElementById('player2');
player.isPlaying = function () {
    return player.paused === false;
}
if  (player.isPlaying()) {
  document.querySelector('#playButton2 .speaker').style.display='none';
  document.querySelector('#playButton2 .pause').style.display='inline-block';
}" onmouseout="
var player = document.getElementById('player2');
player.isPlaying = function () {
    return player.paused === false;
}
if  (player.isPlaying()) {
  document.querySelector('#playButton2 .pause').style.display='none';
  document.querySelector('#playButton2 .speaker').style.display='inline-block';
}">

  <svg class="initial" style="margin:76px 85px;" width="90" height="108" viewbox="0 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " 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="display: none;margin:76px 85px;" width="90" height="108" viewbox="-13 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent;" 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" style="display: none;margin:94px 100px;" width="60" height="72" 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="#1ed760 " fill-rule="evenodd"></path>
  </svg>

  <svg class="play" style="display: none;margin:76px 85px;" width="90" height="108" viewbox="0 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:transparent; " 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>


</div>

<audio id="player2" preload="none" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>

Code 3


<style>
  #playButton4 {
    position: relative;
    border: 3px solid #0059dd;
    width: 266px;
    height: 200px;
    cursor: pointer;
    margin-top: 8px;
box-sizing: border-box;
  }
  
  .img1 {
    position: absolute;
    background: url(https://i.imgur.com/ZmbeHHW.png);
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    width: 170px;
    height: 170px;
    margin: 12px 45px;
  }
  
  .img2 {
    position: absolute;
    background: url(https://i.imgur.com/4HJbzEq.png);
    width: 180px;
    height: 180px;
    margin: 7px 40px;
  }
  
  #grad {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 194px;
    background-image: linear-gradient( to right, transparent 0, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px);
  }
  
  .button div {
    position: absolute;
    width: 38px;
    height: 38px;
    top: 76px;
    left: 111px;
    background-color: transparent;
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
  }

</style>

<div id="playButton4" onclick=" 
var button = document.getElementById('playButton4');
var player = document.getElementById('player4');
player.volume=1.0; if (player.paused) {
button.querySelector('.pause').style.display='inline-block';
button.querySelector('.play').style.display='none';
player.play();
} else {
button.querySelector('.pause').style.display='none';
button.querySelector('.play').style.display='inline-block';
player.pause();
}">

  <div class="img1"></div>
  <div class="img2"></div>
  <div id="grad"></div>

  <div class="button">
    <div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjI2IDE0ODEiPgogIDxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz4KIDwvc3ZnPg=='); background-position: 58% 50%;">
    </div>
    <div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjYwIDE1MTIiPgo8cGF0aCBkPSJNMjUyIDBIMTI2QzkxLjMgMCA2MS43IDEyLjMgMzcgMzcgMTIuMyA2MS43IDAgOTEuMyAwIDEyNnYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6bTg4MiAwaC0xMjZjLTM0LjcgMC02NC4zIDEyLjMtODkgMzctMjQuNyAyNC43LTM3IDU0LjMtMzcgODl2MTI2MGMwIDM0LjcgMTIuMyA2NC4zIDM3IDg5IDI0LjcgMjQuNyA1NC4zIDM3IDg5IDM3aDEyNmMzNC43IDAgNjQuMy0xMi4zIDg5LTM3IDI0LjctMjQuNyAzNy01NC4zIDM3LTg5VjEyNmMwLTM0LjctMTIuMy02NC4zLTM3LTg5LTI0LjctMjQuNy01NC4zLTM3LTg5LTM3eiIgZmlsbD0iIzAwNTlkZCIvPjwvc3ZnPg==');background-position: 50%;display: none;">
    </div>
  </div>
</div>

<audio id="player4" preload="none" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'>
  </source>
</audio>

Code 4


<style>
  #playButton5 {
    position: relative;
    width: 266px;
    height: 251px;
    cursor: pointer;
    border: 3px solid #0059dd;
box-sizing: border-box;
    background-image: linear-gradient( to right, transparent 0, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/qaEvk4G.png");
  }
  
  .initial line {
    stroke-width: 6;
    stroke: #89cff0;
  }
  
  .initial circle {
    stroke-width: 6;
    stroke: #89cff0;
    fill: #000000;
  }
  
  .button2 div {
    position: absolute;
    width: 44px;
    height: 44px;
    top: 100px;
    left: 113px;
    background-repeat: no-repeat;
    border-radius: 50%;
  }

</style>

<div id="playButton5" onclick=" 
var button = document.getElementById('playButton5');
var player = document.getElementById('player5');
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton5 .pause').style.display='inline-block';
document.querySelector('#playButton5 .play').style.display='none';
player.play();
} else {
document.querySelector('#playButton5 .play').style.display='inline-block';
document.querySelector('#playButton5 .pause').style.display='none';
player.pause();
}">

  <svg class="initial" width="260" height="245" viewbox="0 0 260 245">
    <line x1="4" y1="122" x2="29" y2="122" stroke-width="2"></line>
    <line x1="38" y1="122" x2="108" y2="122" stroke-width="2"></line>
    <line x1="83" y1="91" x2="188" y2="151" stroke-width="2"></line>
    <line x1="135" y1="61" x2="135" y2="182" stroke-width="2"></line>
    <line x1="82" y1="152" x2="187" y2="91" stroke-width="2"></line>
    <line x1="148" y1="98" x2="183" y2="38" stroke-width="2"></line>
    <line x1="187" y1="31" x2="199" y2="9" stroke-width="2"></line>
    <line x1="148" y1="145" x2="183" y2="205" stroke-width="2"></line>
    <line x1="188" y1="213" x2="200" y2="233" stroke-width="2"></line>
    <circle cx="135" cy="122" r="24.5"></circle>
  </svg>

  <div class="button2">
    <div class="play" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyMjYgMTQ4MSI+CjxwYXRoIGQ9Ik0wIDEzOTRWODdDMCA0Ni4zIDEzLjMgMTkuOCA0MCA3LjUgNjYuNy00LjggOTguNy4zIDEzNiAyM2wxMDM0IDYzNGMzNy4zIDIyLjcgNTYgNTAuMyA1NiA4M3MtMTguNyA2MC4zLTU2IDgzTDEzNiAxNDU4Yy0zNy4zIDIyLjctNjkuMyAyNy44LTk2IDE1LjUtMjYuNy0xMi4zLTQwLTM4LjgtNDAtNzkuNXoiIGZpbGw9IiMwMDU5ZGQiLz48L3N2Zz4='); background-position: 58% 50%;">
    </div>
    <div class="pause" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDEyNjAgMTUxMiI+CjxwYXRoIGQ9Ik0yNTIgMEgxMjZDOTEuMyAwIDYxLjcgMTIuMyAzNyAzNyAxMi4zIDYxLjcgMCA5MS4zIDAgMTI2djEyNjBjMCAzNC43IDEyLjMgNjQuMyAzNyA4OSAyNC43IDI0LjcgNTQuMyAzNyA4OSAzN2gxMjZjMzQuNyAwIDY0LjMtMTIuMyA4OS0zNyAyNC43LTI0LjcgMzctNTQuMyAzNy04OVYxMjZjMC0zNC43LTEyLjMtNjQuMy0zNy04OS0yNC43LTI0LjctNTQuMy0zNy04OS0zN3ptODgyIDBoLTEyNmMtMzQuNyAwLTY0LjMgMTIuMy04OSAzNy0yNC43IDI0LjctMzcgNTQuMy0zNyA4OXYxMjYwYzAgMzQuNyAxMi4zIDY0LjMgMzcgODkgMjQuNyAyNC43IDU0LjMgMzcgODkgMzdoMTI2YzM0LjcgMCA2NC4zLTEyLjMgODktMzcgMjQuNy0yNC43IDM3LTU0LjMgMzctODlWMTI2YzAtMzQuNy0xMi4zLTY0LjMtMzctODktMjQuNy0yNC43LTU0LjMtMzctODktMzd6IiBmaWxsPSIjMDA1OWRkIi8+PC9zdmc+');background-position: 50%;display: none;">
    </div>
  </div>
</div>

<audio id="player5" preload="none" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>
2

Where you have:

<div id="playButton" onclick="//scripting code">

Move that scripting code in the onclick quotes, in to a function in a scripting area:

function buttonClickHandler(evt) {
  // scripting code 
}

Then attach it as an event handler to the button. Because they all started with on, such as onClick, or onChange, they removed the starting on and made them lowercase.

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

That’s how you move the scripts out of the inline event attribute, to a more appropriate scripting technique.

3 
<div id="playButton" onclick=" 
var button = document.getElementById('playButton');
var player = document.getElementById('player');
  document.querySelector('#playButton .initial').style.display='none';
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton .pause').style.display='inline-block';
document.querySelector('#playButton .play').style.display='none';
    playButton.style.background = 'linear-gradient(to right, #00ffff 0,#00ffff 198px,#0059dd 198px, #0059dd 201px, #ffffff 201px, #ffffff 399px, #0059dd 399px, #0059dd 402px, #ff00ff 402px)';
player.play();
} else {
document.querySelector('#playButton .play').style.display='inline-block';
document.querySelector('#playButton .pause').style.display='none';
    playButton.style.background = 'linear-gradient(to right, transparent 0, transparent 198px,#0059dd 198px, #0059dd 201px, transparent 21px, transparent 399px, #0059dd 399px, #0059dd 402px, transparent 402px)';

player.pause();
}">
4

I have this one you did, but it’s button, and not div.

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
/* preload source: https://perishablepress.com/pure-css-better-image-preloading-without-javascript/ */
div#preloaded-images {
    position: absolute;
    overflow: hidden;
    left: -9999px;
    top: -9999px;
    height: 1px;
    width: 1px;
}
.playButton {
    display: block;
    width: 266px;
    height: 266px;
    cursor: pointer;
    background-color: #000000;
    background-image: linear-gradient(
        to right,
        transparent 83px,
        #0059dd 83px,
        #0059dd 86px,
        transparent 86px,
        transparent 174px,
        #0059dd 174px,
        #0059dd 177px,
        transparent 177px
    );
    background-position: "center";
    border: 3px solid #0059dd;
}
.playButton.triggered {
    border: 3px solid #e77d19;
    background: url("http://via.placeholder.com/260x260");
    background-color: transparent;
    background-repeat: no-repeat;
}
.initial path {
    stroke: #e77d19;
    stroke-width: 3px;
    color: black;
}
.pause path {
    stroke: #e77d19;
    stroke-width: 3px;
    color: transparent;
}
.play path {
    stroke: #e77d19;
    stroke-width: 3px;
    color: transparent;
}
.hide {
    display: none;
}
  </style>
</head>
<body>
  <div id="preloaded-images">
     <img src="http://via.placeholder.com/260x260" width="1" height="1" alt="Image 01" />
  </div>
  <button class="playButton">
    <svg class="initial" width="90" height="108" viewbox="0 -10 85 120">
      <path fill="currentColor" 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 hide" width="90" height="108" viewbox="-13 -10 85 120">
      <path fill="currentColor" 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="play hide" width="90" height="108" viewbox="0 -10 85 120">
      <path fill="currentColor" 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="speaker hide" width="60" height="72" 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="#1ed760 " fill-rule="evenodd"></path>
    </svg>
  </button>

  <audio class="player hide">
    <source type="audio/mpeg" src="http://hi5.1980s.fm/;"></source>
  </audio>

  <script>
var utils = (function() {
    function show(el) {
        el.classList.remove("hide");
    }
    function hide(el) {
        el.classList.add("hide");
    }
    function hideAll(items) {
        items.forEach(function hideItem(item) {
            hide(item);
        });
    }

    return {
        show,
        hide,
        hideAll
    };
}());
var images = (function(utils) {
    var icons = new Map();

    function getSVGIcons(button) {
        var buttonSVG = button.querySelectorAll("svg");
        Array.from(buttonSVG).forEach(function addIcon(svg) {
            var name = svg.getAttribute("class").split(" ")[0];
            icons.set(name, svg);
        });
        return icons;
    }
    function getSVGIcon(name) {
        return icons.get(name);
    }
    function showIcon(iconName) {
        utils.hideAll(icons);
        utils.show(getSVGIcon(iconName));
    }

    return {
        getSVGIcons,
        getSVGIcon,
        showIcon
    };
}(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 showSpeakerHandler() {
        if (isPlaying()) {
            images.showIcon("speaker");
        }
    }
    function init(playButton, audioPlayer) {
        button = playButton;
        player = audioPlayer;
        images.getSVGIcons(button);

        player.volume = 1.0;

        button.addEventListener("click", togglePlayingHandler, false);
        button.addEventListener("mouseover", showPauseHandler, false);
        button.addEventListener("mouseout", showSpeakerHandler, 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>
</body>
</html>
5

That’s fine. button is a more specific term than div. When you are likely to have several variable names relating to the same type of thing, like a div, it helps to use more specific names.

6

it’s button form not div form. everything gets all messed up when you switch button to div because button comes with extra padding.

7

Let’s start with some code on jsfiddle, and make progress from there.

8

div

div to button

9

Which one should we start looking at? Converting the first one?

10

Let try and clean the 2nd one up a bit.

11

Okay, what do you think some troubles are with that second one?

12

Why aren’t the other svg’s showing after you click?

13

I see them appear. The speaker appears when playing and you mouse away from the whole square.

14

I meant, this one:
linear-gradient is missing after you click.
and the buttons, but they are in the code but not showing.

compared to the inline-javascript one:

15

That would be the .playButton.triggered CSS style that’s responsible for that.

I think that you can remove the background stuff from in there, to fix that.

16

I don’t think so, cause that would be a different image.

17

How come inline-javascript is way less code than javascript, and does that mean anything?

18

That’s what the cascade part of cascading style sheets mean.

The .playButton style is applied.
And if the button has a .triggered class, the .playButton.triggered style is applied over the top of any existing .playButton styles.

19

Inline was originally only designed to call a single JavaScript function.
Then, people started abusing it and failing to understand it, by dumping lots of scripting in there.

Then, people editing the HTML code kept screwing up scripting code that was in there, so a separation of HTML, CSS, and JavaScript became a very good idea. That way, people styling the page didn’t need to mess around with the HTML, people updating the HTML content didn’t risk damaging the CSS or JavaScript, and people using JavaScript to script the behaviour of the page had better control over things.

20

I just fixed it:

the buttons just won’t show now.