CODEWITHSUNDEEP
javascript
Sattman5
Sattman5

Reputation: 3

Whenever I press the play button, console gives me a "can't read property of 'play' of null"

It is supposed to change the play icon into a pause icon, or vise versa. Here is my code.

const app = () => {
  const song = document.querySelector(".song");
  const play = document.querySelector(".play");
  const outline = document.querySelector(".moving-outline circle");
  const video = document.querySelector("vid-container video");

  //Sounds
  const sounds = document.querySelectorAll(".sound-picker button");

  //Time Display
  const timeDisplay = document.querySelector(".time-display");

  //Get Length of Outline
  const outlineLength = outline.getTotalLength();

  //Duration
  let fakeDuration = 600;

  outline.style.strokeDasharray = outlineLength;
  outline.style.strokeDashoffset = outlineLength;

  //play sound
  play.addEventListener("click", () => {
    checkPlaying(song);
  });

  //Create a function specific to stop and play the sounds
  const checkPlaying = (song) => {
    if (song.paused) {
      song.play();
      video.play();
      play.src = "./meditation-app-master/svg/play.svg";
    } else {
      song.pause();
      video.pause();
      play.src = "./meditation-app-master/svg/play.svg";
    }
  };
};

app();

I really have no idea what is going on here. Any help would be appreciated.

Upvotes: 0

Views: 58

Answers (1)

Marik Ishtar
Marik Ishtar

Reputation: 3049

The problem is in

const video = document.querySelector("vid-container video")

this selector returns null and when you try to execute video.play() it raise an error

replace vid-container video with the correct selector (add the appropriate selector prefix a . for a class selector, or # for an id selector)

Upvotes: 1

Related Questions