document.getElementById doesn’t work with src

  html, iframe, javascript

I’m trying to do a page where the user can add youtube links and the page will display them, but it doesn’t work for some reason, here is my javascript code:

function addlink() 
    {
          var youtubelink = prompt("add your youtube link");
          if ((youtubelink != null)&& (youtubelink.includes("https://www.youtube.com/watch?v")))
          {
              document.getElementById("video").src= youtubelink;
          } else{
              document.getElementById("demo").innerHTML = "please introduce a valid link";
          }
    }

and the html document has the following:

<!doctype html>
<html lang = "es">
    <head>
        <meta charset="utf-8">
        <title>youtube playlist</title>
        <script type = "text/javascript" src ="javascript.js"></script>
    </head>
    
    <body>
        <p id="demo"></p>
        <iframe id="video" title="W3Schools Free Online Web Tutorials" src="https://www.youtube.com/embed/tgbNymZ7vqY">
        </iframe>

        <p>this is a playlist page.</p>
        

        <button onclick="addlink()">start your playlist</button>
        

    </body>
</html>

for what I read is like youtube is refusing to let me add pages, like I cannot edit the src of the first video, but I’m lost here.

Source: Ask Javascript Questions

LEAVE A COMMENT