Javascript 'x is not a function'

Question

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>

Where are you video elements? I don't see them in your code... — Frxstrem, Jan 28 '17 at 23:57
Well you don't show any element with the ID `"video2.mp4"`, so there's that... — , Jan 28 '17 at 23:57
Also in JavaScript your two buttons have IDs `play-pause` and `play-pause2`, while in your HTML they are called `play` and `play-pause`... — Frxstrem, Jan 28 '17 at 23:58
@squint Sorry, I cut it out as I didn't think it would be relevant and the community guidelines allow for basic HTML — hpq, Jan 29 '17 at 00:06
@Frxstrem That's been updated to how it appears in the code, apologies — hpq, Jan 29 '17 at 00:06
Is `.` a valid character in IDs? I don't think so. Because then `#video.mp4` will be interpretted as an element with the ID `video` and the class `mp4`. — ibrahim mahrir, Jan 29 '17 at 00:21
@ibrahimmahrir Periods [are completely valid](http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html#79022) in IDs. Not recommended, because you'll have to escape it in CSS (`#video\.mp4`) otherwise it'll be interpreted as you said. — Alba Mendez, Jan 29 '17 at 00:32
@ibrahimmahrir you're welcome :) I admit I had to look it up to make sure as well — Alba Mendez, Jan 29 '17 at 00:39

Alba Mendez · Answer 1 · 2017-02-01T18:57:03.673

1

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).

edited Feb 01 '17 at 18:57

answered Jan 29 '17 at 00:17

Alba Mendez

4,189
1
35
51

Ids are unique you should pay attention to your own work before you critique others. – zer00ne Jan 29 '17 at 01:12
What do you mean? The two IDs are different, this code works [(jsfiddle)](https://jsfiddle.net/1cvxyeuv) – Alba Mendez Jan 29 '17 at 09:16
@zer00ne Oh! I understand, you were talking about the `video-controls` id which is repeated... It wasn't the cause of the problem but I've added a note for the OP to fix it too. Thanks! – Alba Mendez Feb 01 '17 at 18:51

Javascript 'x is not a function'

1 Answers1