CODEWITHSUNDEEP
javascriptarraysdomnodelist
Bic Mitchun
Bic Mitchun

Reputation: 518

What is the proper way to iterate over DOM elements with getElementsByClassName?

I want my users to have access to a mobile emulator so they can test the responsiveness of their site. I'm using the iframe method like responsinator After doing research here and here I'm not so sure which route I should choose... I'm trying a code that does not work.

Form input

  Enter the link of your website below

            <form method="post" target="browser" style="padding-top:50px;">
<input  id="txtUrl" style="width:60%; display:inline-block; margin-top:10px; height:100%;" placeholder="eg. http://www.google.com/" name="url" type="text" />
<input style="display:inline-block; height:100%; border-radius:45%;"  type="button" value="Go" onclick="setBrowserFrameSource(); return false;"/>
</form>

This works with only one iframe:

<script type="text/javascript">
    function setBrowserFrameSource(){
        var browserFrame = document.getElementById("browser");
        browserFrame.src= document.getElementById("txtUrl").value;
    }
</script>


 <div id="iPhone5-portrait" class="device-block">
           <h5>iPhone 5 portrait · width: 320px</h5>
          <iframe id="browser" name="browser" src="http://google.com" style="height:568px; width:320px"></iframe>
           </div>

This does not work with multiple:

<script type="text/javascript">
    function setBrowserFrameSource(){
        var browserFrame = document.getElementsByClassName("browser");
        for(var i=0; i<browserFrame.length; i++)
                {
                    alert(browserFrame[i].innerHTML);
                }
        browserFrame.src= document.getElementById("txtUrl").value;
    }
</script>


  <div id="iPhone5-portrait" class="device-block">
           <h5>iPhone 5 portrait · width: 320px</h5>
          <iframe class="browser" name="browser" src="http://google.com" style="height:568px; width:320px"></iframe>
           </div>

           <div id="iPhone5-landscape" class="device-block">
         <h5>iPhone 5 landscape · width: 568px</h5>
          <iframe class="browser" name="browser" src="http://google.com" style="height:320px; width:568px"></iframe>
           </div>

Upvotes: 0

Views: 154

Answers (1)

Yuri Dymov
Yuri Dymov

Reputation: 71

This is the solution:

    for(var i=0; i<browserFrame.length; i++) {
       alert(browserFrame[i].innerHTML);
       browserFrame[i].src= document.getElementById("txtUrl").value;
    }

Upvotes: 1

Related Questions