Javascript, move a specific image on button click

Question

I want to make something using javascript, i got an image which is a track, and 4 people running from the left of the track to the right. So basically all what they need to do is move to the right.

I'm trying to move a image to the right when i click a button. See i managed to move a image but when i duplicated the function, it would only do it for the last image.

image of the track with the 4 runners

I tried different stuff

So i tried to change all variables for every function but it still will only move the last image.
I tried to put If statements but i don't know how exactly how they work, so this might work but i couldn't make it work.

I did also some research on the function init(), which i don't understand completely, but i tried changing around with it but i couldn't make it work

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.

All of your functions for setting up your stage are named "init". Name them differently, or place everything in one of them. — Travis J
– Travis J, Commented Oct 4, 2016 at 10:26

Mihai Cicu · Accepted Answer · 2016-10-04 10:27:50Z

1

Sir, you are overwriting the init function, use different names for each init function. E.g. init1, init2, init3, init4

answered Oct 4, 2016 at 10:27

Mihai Cicu

1,9481 gold badge15 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shubham Khatri · Accepted Answer · 2016-10-04 10:36:29Z

You should have a single init function where you initialize all the 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>

Collectives™ on Stack Overflow

Javascript, move a specific image on button click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related