Converting Inline-javascript to Javascript

JavaScript
365

I shared the whole code at number #318 on here.

366

<ul class="test" class="hide">

367

Working code used this:

<ul id="myObj" class="hide">

368

So let’s try to understand the problem.

The test area is supposed to be hidden when the page starts, and the hide class is supposed to hide them.

Could it be that only the first of those two class attributes is being paid attention to? It is bad HTML to have duplicate attributes on an element. Put both test and hide together in just the one class attribute.

369

how?

370

By space-separating them in the same string.

371
372

<ul class="test, hide" >

373

Those are not space-separated. You have wrongly put a comma in there as well.

374

This works.

<ul class="test hide">

1 Like
376

Let’s work on this one next. Where do I start?

377

playButton4 is not defined. Clicking on that one.

Yes it is.

378

Okay, look at where playButton4 is being used.

379

<div class="playButton4">

.playButton4

380

Is there something wrong with how the CSS is being applied to it?

381

Is there something wrong in here?

<script>
  (function iife() {
    function playButton4ClickHandler() {
      var button = document.querySelector(".playButton4");
      var player = document.querySelector("#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(".play").style.display="inline-block";
button.querySelector(".pause").style.display="none";
player.pause();
      }
    }
    var playButton = document.querySelector(".playButton4");
    playButton4.addEventListener("click", playButton4ClickHandler);
 }());
</script>
382

Look at where playButton4 is being used.

383

Ooh, I notice something else too.

The coloring of the scripting code is all wrong. Do you see that?

384

It’s working now:

1 Like
385

.button div {

or

I get rid of the button if I use this.
.play, .pause{

Which way is preferred?

  .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%;
  }

or

  .play, .pause{
    position: absolute;
    width: 38px;
    height: 38px;
    top: 76px;
    left: 111px;
    background-color: transparent;
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
  }