0

I want to change this code from changing the sources of iframe randomly to be by order

<script type="text/javascript">

function newSite() {
    var sites = ['Experiment1/index.html',
                 'Experiment2/index.html',
                 'Experiment3/index.html']

    document.getElementById('myIframe').src = sites[Math.floor(Math.random() * sites.length)];
}    
</script>

when clicking on this button and also this is the iframe 

<iframe id="myIframe" src="Experiment1/index.html" allowfullscreen="true"  scrolling="no"></iframe><br/>
<input type="button" value="Go to next level" onClick="newSite()" />
shrouk
  • 43
  • 1
  • 1
  • 10

1 Answers1

1

Try defining sites array outside of function, using .shift()

<script type="text/javascript">
var sites = ['Experiment1/index.html',
            'Experiment2/index.html',
            'Experiment3/index.html'];

function newSite() {

    var curr = sites.shift();
    sites[sites.length] = curr;
    document.getElementById('myIframe').src = curr;
}    
</script>
<iframe id="myIframe"
        src="Experiment1/index.html"
        allowfullscreen="true" 
        scrolling="no"></iframe><br/>
<input type="button" value="Go to next level" onClick="newSite()" />

plnkr http://plnkr.co/edit/cQZznvyltX46UO1Y0lDG?p=preview

guest271314
  • 1
  • 15
  • 104
  • 177
  • @shrouk Can you describe "It didn't work"? Commented out ` – guest271314 May 30 '16 at 20:39
  • Now the iframe doesn't go to another src when clicking go to next level button – shrouk May 30 '16 at 20:41
  • what @guest271314 gave you work. You just have to uncomment the document.getElementById to set the new src – Julien Leray May 30 '16 at 20:43
  • Now it worked the error was that there wasn't a ; after sites[sites.length] = curr Thanks – shrouk May 30 '16 at 20:46
  • Thanks alot for your help now I have one problem that the Experiment1/index.html src opens 2 times as it is in the src of the iframe and also in the array in the script function – shrouk May 30 '16 at 21:08
  • 1
    @shrouk _"now I have one problem that the Experiment1/index.html src opens 2 times as it is in the src of the iframe and also in the array in the script function"_ You can adjust `sites` array to `var sites = ['Experiment2/index.html', 'Experiment3/index.html', 'Experiment1/index.html'];` – guest271314 May 30 '16 at 21:09
  • Thanks alot guys :D – shrouk May 30 '16 at 21:33
  • 1
    Done I am sorry I was working on the rest of the code :) – shrouk May 30 '16 at 22:08
  • How can I put a video before opening these sources and when it ends the first src opens? – shrouk May 30 '16 at 23:52
  • @shrouk Are you trying to create a media playlist? – guest271314 May 30 '16 at 23:54
  • No its a game with levels so its an intro video – shrouk May 30 '16 at 23:55
  • @shrouk You should write the Question, include all relevant details; the portions you are having issues with; `html`, `css`, `js`; describe expected result – guest271314 May 30 '16 at 23:56
  • I just need a js code that moves the iframe when the video ends to those srcs – shrouk May 30 '16 at 23:58
  • You can use the `onended` event of `video` element. See https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events , http://stackoverflow.com/questions/36380408/does-the-preload-attribute-of-audio-affect-the-window-onload-event-time , – guest271314 May 31 '16 at 00:04
  • This is the code I am using but for some reason it doesn't work – shrouk May 31 '16 at 02:34
  • Are you trying to change the `src` of the `iframe`? Why are you using `window.location.href`? – guest271314 May 31 '16 at 02:43