0

In an experiment design of mine, I have designed 4 layers of div using z-index in which the second layer will display different images in every iteration. The images have been declared an array using class id. But the timeout function within the script is unable to recognize the array and the console says the array is 'undefined'.

Is there any way to define the array for the setTimeout() function just like getElementbyId() for a div in the following code ?!

P.S: Beginner in coding. Not much knowledge about javascript. Any help is appreciated, Thanks !

Edit: I am still not clear with the available answers. If someone could give a simpler method, Would be helpful

<div id="crosshair" style="background-color:black; position:absolute; width:100%; height:100%; z-index:1; align:center">
   <img src="crosshair.jpg" width="1350px" height="750px" >
</div>

<div id="piclayer1" style="position:absolute ;width:98%; height:98%; z-index:2; align:center; margin-left:0.5%; margin-top:0.5%">
    <img id="images1" class="images" src="image1.jpg" style="width:1325px; height:720px; display:none">
    <img id="images2" class="images" src="image2.jpg" style="width:1325px; height:720px; display:none">
    <img id="images3" class="images" src="image3.jpg" style="width:1325px; height:720px; display:none">
</div>

<script>
    var Layer2Images = document.querySelectorAll("img.images");
</script>


<script>
    for (i=0; i<=40;i++)
     {
        if (i == Layer2Images.length) { //alert here later }
        else
        {
         var t = 3000;
         var add = 3000;        
         setTimeout (function()
                    { Layer2Images[i].style.display = 'block';}
                    ,t);

         setTimeout (function questime()
                    { document.getElementById('question1_1');
                      question1_1.style.display = 'block';}
                    ,t+add);

         }
      }

 </script>

 <div id="question1_1" class="ques1" style="z-index:3; position:absolute; display:none; margin-left: 180px">
    <fieldset name="field1_1" id="field1_1">
       <form name ="problem1_1" id="problem1_1"  >
        <b> Identify the problem shown in this image. </b>
        <br> 
        <br>
        <input type="text" name="answer1_1" id="answer1_1" maxlength="30" style="width: 400px">
        <br>
        <br>
        <input type="button" value="Submit" onclick="showdiv1()"  >
       </form>
    </fieldset>
 </div>

</script>
<script>
    function showdiv1()
    {
    document.getElementById('question1_2').style.display = "block";
    document.getElementById('question1_1').style.display = "none";
    }
</script>
<script>
    function hidediv1()
    {
    document.getElementById('piclayer1').style.display = 'none';
    document.getElementById('question1_1').style.display = "none";
    document.getElementById('question1_2').style.display = 'none';
    }
</script>
Yuva
  • 41
  • 1
  • 5
  • Layer2Images[i] is undefined is the console message – Yuva Oct 25 '16 at 04:59
  • Sorry I'm still not clear with the explanation in the similar question! Could someone please explain? – Yuva Oct 25 '16 at 06:45
  • `setTimeout` tells the browser to execute a function in `t` milliseconds. This function uses variable `i` to determine what to do. While waiting those `t` milliseconds, you're chaning `i`, incrementing it until it's `39`. Now, when `t` has passed, the function that is executed looks up `i`, finds it holds `39` and uses that value to determine what to do. – user3297291 Oct 25 '16 at 07:32
  • Hi. Actually te problem is that the console gives a message saying 'Layer2Images undefined'. I am guessing the element of the arrays are not being recognized by setTimeout function. So I would want to know how to call the element of array in setTimeout function. – Yuva Oct 25 '16 at 07:47
  • There are only 3 images in your list, so once `i >= 3`, `Layer2Images[i]` will return `undefined` – user3297291 Oct 25 '16 at 07:58

0 Answers0