Блог

Я хочу что-то сделать с помощью 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>
     

Спасибо и извините за мой плохой английский.

Сэр, вы перезаписываете функцию инициализации, используйте разные имена для каждой функции инициализации. Например, init1, init2, init3, init4

У вас должна быть одна функция инициализации, в которой вы инициализируете все обработчики изображений

 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>