使用onclick运行一个函数

Question

I have a PHP page that has 3 JavaScript functions and uses image maps with 'onclick' to change the image and the map coordinates so that onclick runs the next function.

The code I have so far runs right the way through to the last image of the last function - which I understand. What I am trying to achieve is for the functions to call after the onclick one at a time in the new coordinates.

It is OK if there is a time limit by when each function will call - but before that time limit the onclick can run the next function:

    <img src=<?php echo 'image-start.jpg' ?> width="700" height="400" 
    usemap="#start" class="map" style="border-style:none; margin:0" id="imageX" />


    <map id="start" name="start">
    <area shape="poly"  id="A"  class=""  title="Click to Start"  onclick="myFunction_1()" 
        coords=<?php echo '"'; echo $coords_0; echo '"' ; ?>/>
    <area shape="poly"  id="B"  class=""  title="Click to Start"  onclick="myFunction_1()" 
        coords=<?php echo '"'; echo $coords_0; echo '"' ; ?>/>
    </map>



    <script>
    function myFunction_1() {
         document.getElementById("imageX").src=" <?php echo 'image_1.jpg' ?>  " ;

         document.getElementById("A").coords= <?php echo '"'; echo $coords_1_a; echo '"' ; ?> ;
         document.getElementById("A").onclick= myFunction_2() ;

         document.getElementById("B").coords= <?php echo '"'; echo $coords_1_b; echo '"' ; ?> ;
         document.getElementById("B").onclick= myFunction_2() ;
         }

    function myFunction_2() {
         document.getElementById("imageX").src=" <?php echo 'image_2.jpg' ?>  " ;

         document.getElementById("A").coords= <?php echo '"'; echo $coords_2_a; echo '"' ; ?> ;
         document.getElementById("A").onclick= myFunction_3() ;

         document.getElementById("B").coords= <?php echo '"'; echo $coords_2_b; echo '"' ; ?> ;
         document.getElementById("B").onclick= myFunction_3() ;
         }

    function myFunction_3() {
         document.getElementById("imageX").src=" <?php echo 'image_end.jpg' ?>  " ;
         }
    </script>

Answer 1

You can cause one function to trigger another after a delay with setTimeout() -- for example, adding the following code to myFunction_1 will cause myFunction_2 to run in 5 seconds (5000 milliseconds)

setTimeout(myFunction_2, 5000)