Javascript moving a specific image when a button is clicked

Question

I want to do something using javascript, I have an image that is a track, and 4 people walking to the left of the track to the right. So basically all they have to do is move right.

I am trying to move the image to the right when I click the button. See. I managed to move the image, but when I duplicated the function, it will only do this for the last image.

I tried different things

• So, I tried to change all the variables for each function, but it would only move the last image anyway.

• I tried to install If instructions, but I don’t know exactly how they work, so this might work, but I couldn’t get it to work.

• I also studied the init () function, which I do not fully understand, but I tried to change it, but I could not get it to work.

       the code   

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

Thanks and sorry for my bad english.

Answer 1

You must have one init function in which you initialize all image handlers

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>


  

Run code

Answer 2

Sir, you are rewriting the init function , use different names for each init function. For instance. init1, init2, init3, init4