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