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