Question

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

当我点击一个按钮时，我正试图将图像向右移动。看到我设法移动图像，但是当我复制该功能时，它只能用于最后一张图像。

image of the track with the 4 runners

我尝试了不同的东西

所以我试图改变每个函数的所有变量，但它仍然只会移动最后一个图像。
我试图把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>

谢谢，抱歉我的英语不好。

Answer 1

先生，您正在覆盖 init 功能，为每个init函数使用不同的名称。例如。 init1，init2，init3，init4

Answer 2

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

＆＃13;

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;

＆＃13;

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

＆＃13;

Javascript，点击按钮

2 个答案: