CODEWITHSUNDEEP
javascripthtml
hpq
hpq

Reputation: 21

Javascript 'x is not a function'

I'm trying to start and stop two videos with two separate buttons. I've simply copied the code and renamed the variables, yet one piece of code works and one doesn't. I get the error 'TypeError: video2.pause is not a function at HTMLButtonElement.c'. Both videos and buttons are placed in modals respectively. Why am I getting this weird error, especially when exactly the same code works?

Javascript:

    var video = document.getElementById("video.mp4");
    var playButton = document.getElementById("play-pause");

    var video2 = document.getElementById("video2.mp4");
    var play = document.getElementById("play-pause2");

    playButton.addEventListener("click", function a () {
        if (video.paused == true) {
          video.play();
          playButton.innerHTML = "Pause";
        } else {
          video.pause();
          playButton.innerHTML = "Play";
        }
      });

    play.addEventListener("click", function c () { 
        if (video2.paused == true) { 
          video2.play(); 
          play.innerHTML = "Pause"; 
        } else {
          video2.pause();
          play.innerHTML = "Play"; 
        }
      });

HTML:

    <video width="900px" height="600px" id="Digital_Poster.mp4" />
      <source src="assets/video.mp4" type="video/mp4" id="video.mp4"/>
         Sorry, this browser does not support the 'video' tag.
    </video>
    <div id="video-controls">
      <button type="button" id="play-pause">Play</button>
    </div>

    <video width="900px" height="600px">
      <source src="assets/video2.mp4" type="video/mp4" id="video2.mp4"/>
         Sorry, this browser does not support the 'video' tag.
    </video>
    <div id="video-controls">
      <button type="button" id="play-pause2">Play</button>
    </div>

Upvotes: 1

Views: 157

Answers (1)

Alba Mendez
Alba Mendez

Reputation: 4605

You should call .pause on the <video> elements, but the id is set on the <source> ones. Moving it to the <video> tags should make it work:

    <video width="900px" height="600px" id="video.mp4">
      <source src="assets/video.mp4" type="video/mp4" />
         Sorry, this browser does not support the 'video' tag.
    </video>
    <div id="video-controls">
      <button type="button" id="play-pause">Play</button>
    </div>

    <video width="900px" height="600px" id="video2.mp4">
      <source src="assets/video2.mp4" type="video/mp4" />
         Sorry, this browser does not support the 'video' tag.
    </video>
    <div id="video-controls">
      <button type="button" id="play-pause2">Play</button>
    </div>

By the way, I've corrected the /> to > in the first line. Also, declaring two elements with ID set to video-controls is illegal, consider using HTML classes (thanks @zer00ne for pointing out).

Upvotes: 1

Related Questions