使用onclick來運行一個函數

我有一個PHP頁面，它有3個JavaScript函數，並使用圖像地圖和'onclick'來改變圖像和地圖座標，以便onclick運行下一個函數。使用onclick來運行一個函數

到目前爲止，我所使用的代碼正好貫穿到最後一個函數的最後一幅圖像 - 我明白這一點。我想要實現的功能是在新座標中一次點擊onclick後調用函數。

這是確定的，如果有是當每個函數將調用時間限制 - 但這一時限之前的onclick可以運行下一個功能：

<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>

來源

2013-02-22 TedtheBear

正如一個供參考，代碼''可以簡化爲'「<？= $ coords_1_b？>」'。這會讓事情變得更容易閱讀。 – 2013-02-22 04:43:32

我盡力避免將服務器代碼與客戶端代碼混合在一起，不惜一切代價。閱讀，維護和擴展變得困難。將客戶端邏輯移出服務器模板將使新功能更易於實現並更易於調試。 – andyzinsser 2013-02-22 04:48:40

@DavidKiger使用短標籤是可以的，但它取決於服務器是否啓用它們或者它們根本不工作。 – Sir 2013-02-22 05:07:29

可以使一個函數後觸發的另一與setTimeout()延遲 - 例如，添加以下代碼來myFunction_1將導致myFunction_2到5秒（5000毫秒）

setTimeout(myFunction_2, 5000)

來源

2013-02-22 05:51:24 mike

謝謝@mike您的幫助，是的，這真的很有用，謝謝，泰德 – TedtheBear 2013-04-05 12:46:48

使用onclick來運行一個函數

回答

相關問題