javascript - Change iframe content with Bootstrap button click and jquery -


i change iframe src url bootstrap button click. javascript code works traditional button, goes wrong when use same code change iframe jquery: (i iframe random @ page load)

bootstrap element (html page)

... <div class="col-md-6">     <a class="btn btn-primary" id="randomize">sekvanta ekzerco</a> </div>  <div>     <iframe id="question" src="url0" width="275"                             height="650" frameborder="0" allowfullscreen="allowfullscreen"> </iframe> </div>  ...     <script src="application.js"></script>     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>   </body> 

application.js

var sources = new array()  sources[0] = 'url0' sources[1] = 'url1' sources[2] = 'url2' sources[3] = 'url3'  var p = sources.length;  $(document).ready(function(){     var randomsource = math.round(math.random()*(p-1));     $('#question').attr('src', 'sources[randomsource]'); }  $('#randomize').click(function() {      var randomsource = math.round(math.random()*(p-1));     $('#question').attr('src', 'sources[randomsource]'); } 

you can remove single quotes sources[randomsource] browser interpret literal rather evaluate expression.

$('#question').attr('src', sources[randomsource]); 

full snippet:

var sources = new array()    sources[0] = 'url0'  sources[1] = 'url1'  sources[2] = 'url2'  sources[3] = 'url3'    var p = sources.length;    $('#randomize').click(function() {      var randomsource = math.round(math.random()*(p-1));      console.log(sources[randomsource]);      $('#question').attr('src', sources[randomsource]);  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>    <button id="randomize">  click me  </button>    <div id="question">  </div>

jsfiddle demonstrating bootstrap version.

https://jsfiddle.net/fz6yythy/


Comments

Popular posts from this blog

amazon web services - S3 Pre-signed POST validate file type? -

c# - Check Keyboard Input Winforms -