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.
Comments
Post a Comment