I want to change the iFrame src on click of a button, please help out-CodePudding

 <section >
        <iframe src="https://example.com" width="640" height="480" allow="autoplay"></iframe>
 </section>
<button onclick="setURL(`https://example.com/new`)"> Episode 2 </button>

 <script>
        function setURL(url) {
            document.getElementById('iframe').src = "url";
        }
 </script>

This code won't work on clicking the button.

I tried the given code, I am expecting that onclicking the button src of the iframe should change.

CodePudding user response：

document.getElementById('iframe') will look for an element with ID="iframe". The given iframe does not have an ID.

try:

<iframe id="iframe" src="https://example.com" width="640" height="480" allow="autoplay"></iframe>

or:

document.getElementsByTagName('iframe')[0].src = ...

CodePudding user response：

document.getElementById('iframe').src = "url";

You should remove the quotations around url and also give the iframe a id. So it should look like this

document.getElementById('iframe').src = url;

CodePudding user response：

you are selecting an element with an id of "iframe". your element does not have an id. This should work (this is selecting an element with the iframe tag):

 <script>
        function setURL(url) {
            document.querySelector('iframe').src = "https://website.com";
        }
 </script>