How to add html attribute to (getElementById)

Question

How can I add "src" in iframe attribute (iframe src=" ") to getElementById (document.getElementById(" ").innerHTML = replaceurl) ?

<div class="output">
  <iframe src="" style="width: 640px; height: 480px;"></iframe>
</div>

<script>
  function myFunction() {
    var geturl = document.getElementById("url").value;
    var replaceurl = ("https://docs.google.com/gview?url=" + geturl + "&embedded=true");
    document.getElementById("").innerHTML = replaceurl;
  }
</script>

Very unclear what you are trying to ask here. Please go read [ask], and then _explain_ properly, what you want to achieve here. — CBroe, Mar 02 '21 at 14:55
Does this answer your question? [How to set data attributes in HTML elements](https://stackoverflow.com/questions/13524107/how-to-set-data-attributes-in-html-elements) — Keimeno, Mar 02 '21 at 14:56

score 0 · Answer 1 · answered Mar 02 '21 at 14:55

You must use the setAttribute method for this (https://developer.mozilla.org/de/docs/Web/API/Element/setAttribute).

In your case, it can be done by writing the following:

// HTML
<iframe id="your-iframe" src="" style="width: 640px; height: 480px;"></iframe>

// JS
document.getElementById("your-iframe").setAttribute('src', replaceurl);

score 0 · Answer 2 · answered Mar 02 '21 at 14:59

why not trying to add an id to the iframe element and pass urls to it by calling your function? like this:

<div class="output">
        <iframe src="" id="myIframe" style="width: 640px; height: 480px;"></iframe>
    </div>

    <script>
        function myFunction(id) {
          var geturl = document.getElementById("url").value;
          var replaceurl = ("https://docs.google.com/gview?url=" + geturl + "&embedded=true");
          document.getElementById(id).src = replaceurl;
        }
//call your function.
myFunction("myIframe");
    </script>

score -1 · Accepted Answer · answered Mar 02 '21 at 15:05

You can set the src of the <iframe> by directly assigning the new URL to the src property.

function myFunction() {
  const
    geturl = document.getElementById("url").value,
    replaceurl = `https://docs.google.com/gview?url=${geturl}&embedded=true`;
  document.querySelector('.output iframe').src = replaceurl;
}

myFunction();

<input type="text" id="url" value="https://stackoverflow.com/" />
<div class="output">
  <iframe style="width: 640px; height: 480px;"></iframe>
</div>

How to add html attribute to (getElementById)

3 Answers3