Moving the script code into the javascript section

JavaScript
1

I think this is what needs to be worked on next.

And I think I would be doing this with Code 1

The reason why I’m using an id is to keep it orderly, and separate from the CSS.

Code 1

<audio autoplay id="player"></audio>

<button class="style" onclick="togglePlay()">Play / Pause</button>

<script>
  function togglePlay() {
    const player = document.getElementById('player');
    if (player.paused) {
      player.play();
    } else {
      player.pause();
    }
  }

</script>

<script>
  document.getElementById('sent').addEventListener('click', function() {
    const player = document.getElementById('player');
    const value = document.getElementById('input');
    player.volume = 1.0;
    player.src = value.value;
  });
</script>

Code 2

<audio autoplay id="player"></audio>

<button class="style" onclick="document.getElementById('player');player.paused ? player.play() : player.pause()">Play / Pause</button>

<script>
  document.getElementById('sent').addEventListener('click', function() {
    const player = document.getElementById('player');
    const value = document.getElementById('input');
    player.volume = 1.0;
    player.src = value.value;
  });

</script>
2

Did I do this correctly?

If I did, can I make any improvements to it?

My Attempt:

(function iife() {
    "use strict";
    const player = document.getElementById("player");
    const button = document.getElementById("button");
    button.addEventListener("click", function () {
        if (player.paused) {
            player.play();
        } else {
            player.pause();
        }
    });
}());
(function iife() {
    "use strict";
    const player = document.getElementById("player");
    const value = document.getElementById("input");
    document.getElementById("sent").addEventListener("click", function () {
        player.volume = 1.0;
        player.src = value.value;
    });
}());
3

Further improvement can be made here:

(function iife() {
    "use strict";
    const player = document.getElementById("player");
    const button = document.getElementById("button");
    const value = document.getElementById("input");
    const sent = document.getElementById("sent");
    
    button.addEventListener("click", function () {
        if (player.paused) {
            player.play();
        } else {
            player.pause();
        }
    });
    
    sent.addEventListener("click", function () {
        player.volume = 1.0;
        player.src = value.value;
    });
}());
1 Like
5

@James_Hibbard

What you posted looked different though.

Can you repost what you did?

You had 3 consts at the top, not 4.

6

It won’t let me undelete the post.

I had left document.getElementById("sent") in place. You had moved sent into its own variable.

But dude (you are a dude, right?), seriously, it’s not magic. If you would quit asking for help with every minute detail of your project and focus on the bigger picture, you’d find you make a lot more progress.

3 Likes
7

Thank you for your help. I appreciate all the help you have been able to give.

1 Like
8

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