Passing a Javascript variable into HTML code to be used as a parameter

Question

I'm quite new to javascript here. I'm trying to make a page which takes a url for a youtube video in a textarea, and passes that through to the video player object which then plays the video.

This is the code that I currently have (the textarea, the youtube video player (iframe), and the javascript.

    <textarea id = "link" rows = "1" cols = "40" class = center>
        Insert link here
    </textarea>
    <input type="button" value="submit" onclick="getLink()">

    <div id="output">
        <iframe width="420" height="315" src=output>
        </iframe>
    </div>

    <script language="javascript" type="text/javascript">

        function getLink() {
            var url = document.getElementById("link").value;
            console.log(url);
            output.innerHTML = url;
        }

    <script>

When the submit button is hit, the player disappears and the text appears on the page, rather than changing the url in the youtube player and playing the linked video. What's going wrong here?

You do `document.getElementById("link")`, then just try to touch a div with the id `output` by using `output.innerHTML`. You need to get the element from the document in that case too. Also you'll actually want to be getting the iframe and setting the src, not setting the content of the div. — WilliamNHarvey, Jun 03 '19 at 22:54

score 2 · Accepted Answer · answered Jun 03 '19 at 23:12

Your trying to change the .src property of your iFrame to be output - the url of your youtube video. That's not the proper way. To be able to do this, you need to give your iFrame element an unique id first e.g. myIframe

Now we can set/get it's .src using

document.getElementById("myIframe").src

So in case of the example you've posted:

   function getLink() {
            document.getElementById("myIframe").src = document.getElementById("link").value;
            }

  <textarea id = "link" rows = "1" cols = "40" class = center>https://www.youtube.com/embed/D2NAzmwNTH0
    </textarea>
    <input type="button" value="submit" onclick="getLink()">

    <div id="output">
        <iframe id="myIframe" width="420" height="315" >
        </iframe>
    </div>

Bipin · Answer 2 · 2019-06-03T23:21:02.333

I would suggest that you understand the basics of javascript and using js in html. There are many errors in the given code but hey everybody has to start somewhere. Anyway here is the code

<input type="text" id="link" placeholder="Insert link here">
<button onclick="getLink()">Submit</button>

<div id="output">
  <iframe width="420" height="315" id="video"></iframe>
</div>
<script>
function getLink() {
  var url = document.getElementById("link");
  var tag = youtube_parser(url.value);
  // You pass the src by this in js. In order to access youtube video in iframe, you have to use "https://www.youtube.com/embed/<videotag>" in src
  document.getElementById("video").src = "https://www.youtube.com/embed/"+tag;
  // This is totally optional but once the button is clicked then the input field is cleared
  url.value = '';
}

function youtube_parser(url){
    var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
    var match = url.match(regExp);
    return (match&&match[7].length==11)? match[7] : false;
}
</script>

That youtube parser function is taken from here

Passing a Javascript variable into HTML code to be used as a parameter

2 Answers2