Would it make sense for this to be a class instead of an id, or no?

JavaScript
1

or is id how it should be set here?

Because, if I changed it to a class instead, the button would no-longer work, which is a particular type, where one button controls both play / pause.

And we know the code works because when you click on the green button, it changes on the controls above. It flips back and forth from play to pause.

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

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

<script>
  const audio = document.getElementById("player");
  audio.volume = 0.6;
</script>
2

What benefit do you think you would obtain from changing the id to a class?

You have code which uses an id and functions as expected. What reason do you have for wanting to change it to a class?

1 Like
3

That sounds like a good enough reason to leave well alone.

1 Like
4

player is being used more than once, so that’s why a ‘class’ instead of an ‘id’.

Thank you for reminding me about this post, I forgot to update it.

I was able to figure it out.

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

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

const player = document.querySelector('.player');

5

Sorry, but I don’t think you have.

Homework question:
What is the difference in what querySelector and querySelectorAll return?

Reading materials:

1 Like
6

How would I have gotten querySelectorAll to work then?

This didn’t work:

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

This didn’t work:

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

This works:
https://jsfiddle.net/z68921e3/9/

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

This works:
https://jsfiddle.net/xuoq917b/

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

const player = document.querySelector('.player');

7

This one uses onclick="const player =

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

This one doesn’t.

If getElementById is being used here, then const player = doesn’t need to be attached to it.

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

Furthermore:

If querySelector is being used here.
Then onclick="const player = would need to be attached to it for it to work.

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

Am I getting anything wrong?

8

Yes.

I didn’t ask which “works” and which doesn’t or what the differences of the examples were. I asked

When you can answer that question you will be able to answer your own. Give it your best try and if there is anything in either of those two MDN pages you don’t understand, ask.

9

querySelector refers to 1

querySelectorAll refers to multiple

10

And what type of structure do you get back from the latter?

12

This: ?

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

13

This should be enough for you to realize which of querySelector and querySelectorAll you should be using.

In order to better understand why one “works” and the other doesn’t work, you need to take a look at what they return. i.e.

14

querySelectorAll refers to what is inside here: ('.player')

There is only one thing inside the above part.

Not this part:
;player.paused ? player.play() : player.pause()

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

15

The Document method querySelectorAll() returns a static (not live) NodeList representing a list of the document’s elements that match the specified group of selectors.

Once the NodeList of matching elements is returned, you can examine it just like any array. If the array is empty (that is, its length property is 0), then no matches were found.

Otherwise, you can simply use standard array notation to access the contents of the list. You can use any common looping statement

Also…

NodeList objects are collections of nodes, usually returned by properties such as Node.childNodes and methods such as document.querySelectorAll() .

1 Like
16

Maybe this example will help you understand “return”?

function my_function(argument) { 
  if (argument == "foo") { 
    return 1; 
  } else if (argument == "bar") { 
    return "hello"; 
  } 
  return false; 
} 
const myfoo = my_function("foo"); 
// myfoo is the integer one 
const mybar = my_function("bar"); 
// mybar is the string hello 
const mybaz = my_function("baz"); 
// mybaz is the boolean false
2 Likes
17

I do have this example like how you have that set up.

So, I would be using an id to keep everything separate, and orderly so elements don’t get confused.

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

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

</script>
18

That doesn’t use the return keyword though, so isn’t relevant to learning how it works.

20

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