CODEWITHSUNDEEP
javascriptevent-handlingdom-events
haseeb
haseeb

Reputation: 1

Javascript Events

These days I am learning Javascript Events while building my media playing application via Javascript events. I did not understand the condition used in this program/code I just want to clear my concept on these if else conditions in this code that how music played and paused by using this if else conditions?

var jukeBox = document.querySelector('ul.player');

jukeBox.addEventListener('click', function(e) {
  var songName = e.target.getAttribute('data-src');
  var songPlaying = document.querySelector('#player');
  if(songPlaying){
    if(songPlaying.paused){
      songPlaying.play();
      e.target.id = 'playing';
    }else{
      songPlaying.pause();
      e.target.id = 'pause';
    }
  }else{
    var audioPlayer = document.createElement('audio');
    audioPlayer.id = 'player';
    audioPlayer.src = songName;
    document.body.appendChild(audioPlayer);
    audioPlayer.play();
    e.target.id = 'playing';
  }


}, false);
body {
  font: normal 15px/15px Helvetica;
  background: #259286;
}

ul.player {
  width: 180px;
  margin: 0 auto;
  margin-top: 100px;
  list-style: none;
}

ul.player li {
  border-bottom: 1px solid #999;
  color: #444;
  padding: 9px 5px 10px 40px;
  background: url(images/media_btn.png) no-repeat 8px 7px;
  background-color: #EAE3CB;
  background-position: 9px 4px;
  cursor: pointer;
}

ul.player li:first-child {
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  border-top: none;
}

ul.player li:last-child {
  -webkit-border-bottom-left-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  border-bottom: none;
}

ul.player li:hover {
  background-color: #475B62;
  color: #FCF4DC;
}

ul.player li#playing {
  background: url(images/media_play_btn.png) no-repeat 8px 7px;
  background-color: #FCF4DC;
  color: #2176C7;
  font-weight: bold;
  background-position: 9px 4px;
}

ul.player li#paused {
  background: url(images/media_pause_btn.png) no-repeat 8px 7px;
  background-color: #666;
  color: #FFF;
  font-weight: bold;
  background-position: 9px 4px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Events</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <ul class="player">
      <li data-src="audio/Phoebex.mp3">Phoebex</li>
      <li data-src="audio/AmazingLee.mp3">AmazingLee</li>
      <li data-src="audio/NightKitty.mp3">Night Kitty</li>
      <li data-src="audio/EqueKenox.mp3">Eque Kenox</li>
      <li data-src="audio/Shiloah.mp3">Shiloah</li>
    </ul>
    <script src="script.js"></script>
  </body>
</html>

Upvotes: 0

Views: 86

Answers (2)

Alan1963
Alan1963

Reputation: 209

A nice sample of events with JS,

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>Drunk</h1>
    <div id="prompt"></div>
</body>

<script src="drunk_events.js" asp-append-version="true"></script>
<script>
    // testing
    prompt = document.getElementById('prompt');

    const drunk = new Drunk('Alice Cooper', 12);
    drunk.Drink();

    document.addEventListener("drunkMessages", e => {
        prompt.textContent = e.detail.message;
    });
</script>

</html>

// CUSTOM EVENT - by: Alan1963
var eventArgs = {
    message: ''
};
const drunkMessagesEvent = new CustomEvent("drunkMessages", {
    detail: eventArgs
});
// CLASS
class Drunk extends Event {
    constructor(name, limit) {
        super('drunkMessages');
        this.name = name;
        this.limit = limit;
    }

    Drink() {
        const name = this.name;
        const limit = this.limit;
        const task = setInterval(timingTask, 1000);
        var count = 0;

        function timingTask() {
            count++;
            if (count > limit) {
                eventArgs.message = name + ' go to sleep';
                // stop timing task
                clearInterval(task);
            } else {
                eventArgs.message = 'Drinking ' + count + ' of ' + limit;
            }
            document.dispatchEvent(drunkMessagesEvent);
        }
    }
}

Upvotes: 2

LellisMoon
LellisMoon

Reputation: 5030

var songPlaying = document.querySelector('#player');

will search an element with id player in your dom.

Next the if(songPlaying) will be true when the element exists on your dom.

simply if songPlaying exists that won't be null and so you will enter in the if statement. Instead, if the element isn't present, an undefined will be in that variable, and the else statement will be executed.

Upvotes: 0

Related Questions