CODEWITHSUNDEEP
javascripthtmliframe
Sergio C
Sergio C

Reputation: 113

javascript - two buttons to open 2 iframes respectively

Good afternoon, I'm using two buttons on my site, each opens a different iframe. The problem is that after clicking to open one, the other does not open simultaneously when clicking the other iframe button.

$(function() {
  $('#load').click(function() {
    if (!$('#iframe').length) {
      $('#iframeHolder').html('<iframe id="iframe" scrolling="no" style="border:0px;" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" width="100%" height="700px;"></iframe>');
    }
  });
});


$(function() {
  $('#load2').click(function() {
    if (!$('#iframe').length) {
      $('#iframeHolder2').html('<iframe id="iframe" scrolling="no" style="border:0px;" src="https://assets.wordpress.envato-static.com/uploads/2017/08/tropical-PS53BSA.jpg" width="100%" height="300px;"></iframe>');
    }
  });
});
<center>
  <a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load">PODCASTS</a>&nbsp;
  <a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load2">SCHEDULE</a>
</center>
<br>
<br>
<br>
<div id="iframeHolder"></div>
<br>
<br>
<div id="iframeHolder2"></div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

Upvotes: 0

Views: 275

Answers (1)

David
David

Reputation: 218827

Because that's exactly what if(!$('#iframe').length) is preventing in both of your buttons. When you append your new HTML to the page, it includes an element with id="iframe". So the next time you run that if statement, .length is greater than 0 so the check is false and the if block does not execute.

Without that if, you can open both:

$(function(){
    $('#load').click(function(){ 
        $('#iframeHolder').html('<iframe scrolling="no" style="border:0px;" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" width="100%" height="700px;"></iframe>');
    });   
});
        
        
$(function(){
    $('#load2').click(function(){ 
        $('#iframeHolder2').html('<iframe scrolling="no" style="border:0px;" src="https://assets.wordpress.envato-static.com/uploads/2017/08/tropical-PS53BSA.jpg" width="100%" height="300px;"></iframe>');
    });   
});
<center><a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load">PODCASTS</a>&nbsp;<a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load2">SCHEDULE</a>
<br>
<br>
<br>
<div id="iframeHolder"></div>  
<br>
<br>
<div id="iframeHolder2"></div>  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

Note: I also removed the id="iframe" from the appended HTML, since you don't want to append two elements with the same id to the page. If you need those elements to have IDs, they'll have to be unique.

If, on the other hand, you want to be able to switch between the two then you would want to put them in a single container rather than in their own containers:

$(function(){
    $('#load').click(function(){ 
        $('#iframeHolder').html('<iframe scrolling="no" style="border:0px;" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" width="100%" height="700px;"></iframe>');
    });   
});
        
        
$(function(){
    $('#load2').click(function(){ 
        $('#iframeHolder').html('<iframe scrolling="no" style="border:0px;" src="https://assets.wordpress.envato-static.com/uploads/2017/08/tropical-PS53BSA.jpg" width="100%" height="300px;"></iframe>');
    });   
});
<center><a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load">PODCASTS</a>&nbsp;<a style="background-color: rgb(98,124,169,0.8); color: white; cursor: pointer;" class="hashtagsocial" id="load2">SCHEDULE</a>
<br>
<br>
<br>
<div id="iframeHolder"></div>  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

Note also that using 2 document.ready handlers is redundant. You don't need that much ceremony for each click handler, just create them both:

$(function(){
    $('#load').click(function(){ 
        $('#iframeHolder').html('<iframe scrolling="no" style="border:0px;" src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg" width="100%" height="700px;"></iframe>');
    });   

    $('#load2').click(function(){ 
        $('#iframeHolder').html('<iframe scrolling="no" style="border:0px;" src="https://assets.wordpress.envato-static.com/uploads/2017/08/tropical-PS53BSA.jpg" width="100%" height="300px;"></iframe>');
    });   
});

Upvotes: 1

Related Questions