Jump to content

Urgent Help needed SetTimeOut

mtsgill

By mtsgill
in JavaScript

 Share

Recommended Posts

mtsgill Newbie

mtsgill

Posted
Posted

Hi Guys! I am kinda stuck on this code. I am trying to set individual setTimeout for all of my buttons to appear on video clips. But I only managed to appear the first two buttons after 13 seconds. How can I do the same for all others? I was unable to do so that's why I had to do the style.visibility="visible" within the other functions just to make sure buttons appear after execution of one function. If I follow the same setTimeout I did for button1 and button2 for other buttons, It doesnt work in a right way. I am very confused and frustrated. PLEASE HELP!!! Is there another way of doing this? Here is my full code: 

<!DOCTYPE html><html><head>  <link type="text/css" rel="stylesheet" href="stylesheet.css"/>  <title>Welcome to Interactive Narrative Media Project - by Fokrul Islam </title>  <script>   // 13 seconds delay for left button to appear on video   function showLeft() {   document.getElementById("button1").style.visibility = "visible";   }   setTimeout("showLeft()", 13000);   // 13 seconds delay for right button to appear on video   function showRight() {   document.getElementById("button2").style.visibility = "visible";   }   setTimeout("showRight ()", 13000);   //link to left choice video once left button is pressed and button gets cleared from the video frame at the same time   //gives options to pick a bike or no bike on screen   function turnLeft()   {   document.getElementById("button1").style.visibility="hidden";   document.getElementById("button2").style.visibility="hidden";   document.getElementById("mp4_src").src="video2.m4v";   document.getElementById("video1").load();   document.getElementById("button5").style.visibility="visible";   document.getElementById("button6").style.visibility="visible";   }   //character picks up a bike   function pickBike() {   document.getElementById("button5").style.visibility="hidden";   document.getElementById("button6").style.visibility="hidden";   document.getElementById("mp4_src").src="video8.m4v";   document.getElementById("video1").load();   document.getElementById("button9").style.visibility="visible";   document.getElementById("button10").style.visibility="visible";   }   //character decides not to take a bike   function noBike() {   document.getElementById("button5").style.visibility="hidden";   document.getElementById("button6").style.visibility="hidden";   document.getElementById("mp4_src").src="video9.m4v";   document.getElementById("video1").load();   document.getElementById("button11").style.visibility="visible";   document.getElementById("button12").style.visibility="visible";   }   //link to right choice video once right button is pressed and button gets cleared from the video frame at the same time   //gives options to push the gate or jump the gate   function turnRight()   {   document.getElementById("button2").style.visibility="hidden";   document.getElementById("button1").style.visibility="hidden";   document.getElementById("mp4_src").src="video3.m4v";   document.getElementById("video1").load();   document.getElementById("button3").style.visibility="visible";   document.getElementById("button4").style.visibility="visible";   }   //character jumps the gate   function jumpGate() {   document.getElementById("button3").style.visibility="hidden";   document.getElementById("button4").style.visibility="hidden";   document.getElementById("mp4_src").src="video5.m4v";   document.getElementById("video1").load();   document.getElementById("button7").style.visibility="visible";   document.getElementById("button8").style.visibility="visible";   }   //character pushes the gate   function pushGate() {   document.getElementById("button3").style.visibility="hidden";   document.getElementById("button4").style.visibility="hidden";   document.getElementById("mp4_src").src="video4.m4v";   document.getElementById("video1").load();   document.getElementById("button7").style.visibility="visible";   document.getElementById("button8").style.visibility="visible";   }   //character fights back   function fightBack() {   document.getElementById("button7").style.visibility="hidden";   document.getElementById("button8").style.visibility="hidden";   document.getElementById("mp4_src").src="video6.m4v";   document.getElementById("video1").load();     }   //character runs away   function noFight() {   document.getElementById("button7").style.visibility="hidden";   document.getElementById("button8").style.visibility="hidden";   document.getElementById("mp4_src").src="video7.m4v";   document.getElementById("video1").load();   }   //character drinks water   function drinkWater() {   document.getElementById("button9").style.visibility="hidden";   document.getElementById("button10").style.visibility="hidden";   document.getElementById("mp4_src").src="video10.m4v";   document.getElementById("video1").load();   }   //character doesnt drink water   function noWater() {   document.getElementById("button9").style.visibility="hidden";   document.getElementById("button10").style.visibility="hidden";   document.getElementById("mp4_src").src="video11.m4v";   document.getElementById("video1").load();   }   //character goes left   function goLeft() {   document.getElementById("button11").style.visibility="hidden";   document.getElementById("button12").style.visibility="hidden";   document.getElementById("mp4_src").src="video13.m4v";   document.getElementById("video1").load();   }   //character goes right   function goRight() {   document.getElementById("button11").style.visibility="hidden";   document.getElementById("button12").style.visibility="hidden";   document.getElementById("mp4_src").src="video12.m4v";   document.getElementById("video1").load();   }     </script>  </head><body>  <div id="header">	    <h2>Interactive Narrative Media</h3>  </div>  <div id="left">   <!--Two buttons are defined here-->   <button onclick="turnLeft()" id="button1" style="position: absolute; left: 55px; top: 473px; height: 33px;">Turn Left</button>   <button onclick="turnRight()" id="button2" style="position: absolute; left: 465px; top: 473px; height: 33px;">Turn Right</button>   <button onclick="jumpGate()" id="button3" style="position: absolute; left: 55px; top: 473px; height: 33px;">Jump Gate</button>   <button onclick="pushGate()" id="button4" style="position: absolute; left: 465px; top: 473px; height: 33px;">Push Gate</button>   <button onclick="pickBike()" id="button5" style="position: absolute; left: 55px; top: 473px; height: 33px;">Pick a Bike</button>   <button onclick="noBike()" id="button6" style="position: absolute; left: 465px; top: 473px; height: 33px;">No Bike</button>   <button onclick="goRight()" id="button12" style="position: absolute; left: 465px; top: 473px; height: 33px;">Go Right</button>   <button onclick="goLeft()" id="button11" style="position: absolute; left:55px; top: 473px; height: 33px;">Go Left</button>   <button onclick="fightBack()" id="button7" style="position: absolute; left: 55px; top: 473px; height: 33px;">Fight Back</button>   <button onclick="noFight()" id="button8" style="position: absolute; left: 465px; top: 473px; height: 33px;">Run Away</button>   <button onclick="drinkWater()" id="button9" style="position: absolute; left: 55px; top: 473px; height: 33px;">Drink Water</button>   <button onclick="noWater()" id="button10" style="position: absolute; left: 465px; top: 473px; height: 33px;">No Water</button>   <br>   <!--First video on page load is defined here and set to autoplay with customised dimensions-->   <video id="video1" controls="controls" autoplay="autoplay" width="591" height="440">   <source id="mp4_src" src="video1.m4v" type="video/mp4">   </video>   <br>  </div>  <div id="right">  <h2 class="contents_head">Main Objective!</h2>   <p class="my-style">The aim of the video is to guide the Character home safely. Your job will be to successfully select the correct options displayed to you. At certain points in the video, the Character would need to make choices depending on his situations. Your job is to select the options which would get him home safely. If you select the wrong option, they you must RESTART the video!  </div>  <!-- This div footer is used to create a nice bordered footer at the bottom of the page-->  <div id="footer" style="left: 1px; bottom: -37px">  <br>  </div></body></html>

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

I'm not sure what you're actually trying to do. You can either write a function like you did, or pass setTimeout some inline code, and tell it how long you want it to wait to execute it. You can do that anywhere, you can use setTimeout in any other function you want.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...