Javascript，移動按鈕上的特定圖片點擊

Question

我想使用javascript製作一些東西，我得到了一個圖片，這是一個軌道，並且有4個人從軌道左側跑到右邊。所以基本上所有他們需要做的就是向右移動。

我試圖將圖像向右移動，當我點擊一個按鈕。看到我設法移動一個圖像，但是當我複製該功能時，它只會爲最後一張圖像執行此操作。

我嘗試不同的東西

1. 所以我試圖改變所有變量對每個功能，但它仍然只會移動最後一張圖像。

2. 我試圖把If語句，但我不知道他們如何工作，所以這可能工作，但我不能讓它工作。

3. 我也做了功能上的init（），我不完全理解一些研究，但我試圖改變它周圍，但我不能使它工作

   代碼

   <script type="text/javascript"> 
   
        var imgObjgroen = null; 
         function init(){ 
          imgObjgroen = document.getElementById('lopergroen'); 
          imgObjgroen.style.left = '35px'; 
         } 
         function moveGreenRight(){ 
          imgObjgroen.style.left = parseInt(imgObjgroen.style.left) + 95 + 'px'; 
         } 
   
        var imgObjrood = null; 
         function init(){ 
          imgObjrood = document.getElementById('loperrood'); 
          imgObjrood.style.left = '35px'; 
         } 
         function moveRedRight(){ 
          imgObjrood.style.left = parseInt(imgObjrood.style.left) + 95 + 'px'; 
         } 
   
        var imgObjgeel = null; 
         function init(){ 
          imgObjgeel = document.getElementById('lopergeel'); 
          imgObjgeel.style.left = '35px'; 
         } 
         function moveYellowRight(){ 
          imgObjgeel.style.left = parseInt(imgObjgeel.style.left) + 95 + 'px'; 
         } 
   
        var imgObjblauw = null; 
         function init(){ 
          imgObjblauw = document.getElementById('loperblauw'); 
          imgObjblauw.style.left = '35px'; 
         } 
         function moveBlueRight(){ 
          imgObjblauw.style.left = parseInt(imgObjblauw.style.left) + 95 + 'px'; 
         } 
   
         window.onload =init; 
   
   
       </script> 
   

   <div id="wrap"> 
       <img id="baan" src="baan.png"> 
       <img id="lopergroen" src="lopergroen.png"> 
       <img id="loperrood" src="loperrood.png"> 
       <img id="lopergeel" src="lopergeel.png"> 
       <img id="loperblauw" src="loperblauw.png"> 
   </div> 
   
   <button id="lopergroenbutton" onclick="moveGreenRight();">groen</button> 
   <button id="loperroodbutton" onclick="moveRedRight();">rood</button> 
   <button id="lopergeelbutton" onclick="moveYellowRight();">geel</button> 
   <button id="loperblauwbutton" onclick="moveBlueRight();">blauw</button> 
   

感謝和抱歉，我的英語不好。

Answer 1

你應該有，你初始化所有的圖像處理程序

var imgObjgroen = null; 
 
     var imgObjrood = null;  
 
var imgObjgeel = null; 
 
    var imgObjblauw = null; 
 
function init(){ 
 
       imgObjblauw = document.getElementById('loperblauw'); 
 
       imgObjblauw.style.left = '35px'; 
 
       imgObjgeel = document.getElementById('lopergeel'); 
 
       imgObjgeel.style.left = '35px'; 
 
       imgObjrood = document.getElementById('loperrood'); 
 
       imgObjrood.style.left = '35px'; 
 
       imgObjgroen = document.getElementById('lopergroen'); 
 
       imgObjgroen.style.left = '35px'; 
 
      } 
 
      function moveGreenRight(){ 
 
       imgObjgroen.style.left = parseInt(imgObjgroen.style.left) + 95 + 'px'; 
 
      } 
 

 
     
 
      
 
      function moveRedRight(){ 
 
       imgObjrood.style.left = parseInt(imgObjrood.style.left) + 95 + 'px'; 
 
      } 
 

 
     
 
      
 
      function moveYellowRight(){ 
 
       imgObjgeel.style.left = parseInt(imgObjgeel.style.left) + 95 + 'px'; 
 
      } 
 

 
     
 
      
 
      function moveBlueRight(){ 
 
       imgObjblauw.style.left = parseInt(imgObjblauw.style.left) + 95 + 'px'; 
 
      } 
 

 
      window.onload =init;

<div id="wrap"> 
 
    <img id="baan" src="baan.png"> 
 
    <img id="lopergroen" src="lopergroen.png"> 
 
    <img id="loperrood" src="loperrood.png"> 
 
    <img id="lopergeel" src="lopergeel.png"> 
 
    <img id="loperblauw" src="loperblauw.png"> 
 
</div> 
 

 
<button id="lopergroenbutton" onclick="moveGreenRight();">groen</button> 
 
<button id="loperroodbutton" onclick="moveRedRight();">rood</button> 
 
<button id="lopergeelbutton" onclick="moveYellowRight();">geel</button> 
 
<button id="loperblauwbutton" onclick="moveBlueRight();">blauw</button> 
 

 

 

Answer 2

先生，您正在覆蓋init函數，爲每個init函數使用不同的名稱。例如。 INIT1，INIT2，INIT3，init4