disappearance after getting some elements

Question

I'm trying to make chapters for the video player, however, I faced some difficulties. When you run the code below, test li appears with the video or without but if you uncomment these two lines, li disappears. It looks like the page doesn't load before the script but the solution I had found didn't help me. What is the problem?

<!DOCTYPE html>

<html lang="ru">
    <head>
        <title>
            Video Player
        </title>
    </head>
    <body>
        <video id="video" width="800" height="600" autoplay controls>
            <source src="Video.mp4" type="video/mp4">
            <track id="track" src="Video.vtt" kind="chapters" srclang="en">
        </video>

        <ol id="Chapters">
            <!---There chapters will be--->
        </ol>

        <script type="text/javascript">
            // let Video = document.getElementById("video");
            // let Tracks = Video.getElementById("track");
            let Chapt = document.getElementById("Chapters");
            let Text = document.createTextNode("test");

            let li = document.createElement("li");
            Chapt.append(li);
            li.appendChild(Text);
        </script>
    </body>
</html>

Use your developer console: `Uncaught TypeError: Video.getElementById is not a function` — epascarello, Jan 30 '19 at 01:33
getElementById is only available on the document. Since ids are singular, there is no reason so use it on the element. — epascarello, Jan 30 '19 at 01:44
try using tagnames instead of id and and 0 index though this is not best solution just an option let Video = document.getElementsByTagName("video")[0]; let Tracks = Video.getElementsByTagName("track")[0]; — bdalina, Jan 30 '19 at 01:51

score 1 · Accepted Answer · answered Jan 30 '19 at 01:43

That's because document.getElementById("video") is returning a DOM "Element" object. Element objects don't have the method getElementById, and that's simply because the the value for id should be present only once in the document.

The fix to your code is to use: document.getElementById("track").

disappearance after getting some elements

1 Answers1