Javascript,在按钮点击时移动特定图像

我想用 javascript制作一些东西,我得到的图像是一个轨道,4个人从轨道的左边跑到右边.所以基本上他们需要做的就是向右移动.

当我点击一个按钮时,我正试图将图像向右移动.看到我设法移动图像,但当我复制该功能时,它只会为最后一个图像.

我试过不同的东西

>所以我试图改变每个函数的所有变量,但它仍然只会移动最后一个图像.
>我试图把If语句但我不知道它们究竟是如何工作的,所以这可能有效,但我无法使它工作.
>我也对函数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>

谢谢,抱歉我的英语不好.

解决方法

您应该有一个初始化函数来初始化所有图像处理程序

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>