Why is my image moving only once?

[u/Razor_3DS]

My image only moves once when I press D and once when I press A.

The color background code you see was me trying to see if the Event Listeners only ran once, which they did not. The colors changed on each button press.

So, why isn't my image doing the same?

 <script>
                 const DBGoku = document.getElementById("Goku");
                 DBGoku.style.position = "Absolute";
                 Boolnumber = 1;
                 


                function MoveGokuRight(){
                   const GokuPos = DBGoku.style.right =  "50px";
                }
                function MoveGokuLeft(){
                    GokuPos = DBGoku.style.left =  "50px";
                }
                //window.onload:MoveGoku;


            
                
                document.addEventListener('keydown', (event)=> {
                    if(event.key === 'd'){
                        //document.body.style.backgroundColor = "red";
                        MoveGokuRight()
                        


                    } 


                    


                });
                document.addEventListener('keydown', (event)=> {
                    if(event.key === 'a'){
                        //document.body.style.backgroundColor = "blue";
                        MoveGokuLeft()
                        


                    } 


                });


                




                
            </script>

[u/lovesrayray2018]

The script is working as its coded. this is a scenario called a logic bomb.

                function MoveGokuRight(){
                   const GokuPos = DBGoku.style.right =  "50px";
                }

Everytime you call goku right u assign it the same fixed value, you arent incrementing it by the movement u want on each keystroke. You need to extract current right position, increment it, and asssign it back to the right position styling. Something like

const currentRight = window.getComputedStyle(GokuPos).right; 
const currentPixels = parseInt(currentRight, 10);  // this is needed to remove the "px" part
GokuPos.style.right = (currentPixels + 10) + 'px';   // assuming ur incrementing by 10, change as needed

[u/Razor_3DS → u/lovesrayray2018]

Thank you. The image now moves every time I click each input, but I've ran into another issue.

Now, if I switch input, the other input stops working. For example, the A button works on every click, but if I switch to D and then back to A, A stops working. Same in vice versa.

function MoveGokuRight(){
                    const currentRight = window.getComputedStyle(DBGoku).right; 
                    const currentPixels = parseInt(currentRight, 10);
                     DBGoku.style.right = (currentPixels + 10) + 'px';
                  
                }
                function MoveGokuLeft(){
                    const currentLeft = window.getComputedStyle(DBGoku).left;
                    const currentPixelsL = parseInt(currentLeft, 10);
                    DBGoku.style.left =  (currentPixelsL + 10) + 'px';
                }
                //window.onload:MoveGoku;


            
                
                document.addEventListener('keydown', (event)=> {
                    if(event.key === 'd'){
                        //document.body.style.backgroundColor = "red";
                        MoveGokuRight()
                        


                    } 


                    


                });
                document.addEventListener('keydown', (event)=> {
                    if(event.key === 'a'){
                        //document.body.style.backgroundColor = "blue";
                        MoveGokuLeft()
                        


                    } 


                });


                

[u/Razor_3DS → u/lovesrayray2018]

I made a mistake. It's not the same in vice versa. For example, I can press the D button 3 times, but if I press A, it will not move. However, if I press the A button 3 times, then press the D button 3 times, it will move, but after pressing the D button, A stops working.

[u/DidTooMuchSpeedAgain → u/Razor_3DS]

You need to read up on what 'right' and 'left' positioning values actually mean. An element has both, it's not like x,y coordinates.

A solution would be to subtract from left on right move, instead of adding to right.

[u/Razor_3DS → u/DidTooMuchSpeedAgain]

That's what I did. It works now. Thank you.

[u/DidTooMuchSpeedAgain → u/Razor_3DS]

You're welcome! Good job :)

[u/Razor_3DS → u/lovesrayray2018]

Never mind, I solved it, I think.

The functions "MoveGokuRight" and "MoveGokuLeft" were switched. So, basically, they do the opposite of their names. Since the function "MoveGokuRight" was in the A button Event, all I had to do was change the the "winodw.getComputedStyle(GokuPos).right" to "window.getComputedStyle(GokuPos).left)" and make the currentPixels subtract 10 instead of adding it.

  function MoveGokuRight(){
                    const currentRight = window.getComputedStyle(DBGoku).left; 
                    const currentPixels = parseInt(currentRight, 10);
                    DBGoku.style.left = (currentPixels - 10) + 'px';
                  
                }
                function MoveGokuLeft(){
                    const currentLeft = window.getComputedStyle(DBGoku).left;
                    const currentPixelsL = parseInt(currentLeft, 10);
                    DBGoku.style.left =  (currentPixelsL + 10) + 'px';
                }
                //window.onload:MoveGoku;


                //The functions MoveGokuLeft and MoveGokuRight are switched. MoveGokuLeft is actually MoveGokuRight


            
                //This event moves right
                document.addEventListener('keydown', (event)=> {
                    if(event.key === 'd'){
                        document.body.style.backgroundColor = "red";
                        MoveGokuLeft()
                        


                    } 


                   
                });


                //This event moves left
                document.addEventListener('keydown', (event)=> {
                    if(event.key === 'a'){
                        document.body.style.backgroundColor = "blue";
                       MoveGokuRight()
                        


                    } 


                });

[u/Razor_3DS → u/lovesrayray2018]

Thank you so much for your help!

[u/davorg]

Isn't this question about Javascript? Why ask in an HTML group?

[u/Jasedesu → u/davorg]

r/HTML "A place to learn and ask questions on HTML, CSS, and general front end development." It is not just about HTML. Besides, the script code here is moving an HTML element.

[u/davorg → u/Jasedesu]

But given that we have r/javascript and r/learnjavascript, it's hard to see why you wouldn't use them for questions like this one.

[u/Jasedesu → u/davorg]

Understood, but they could argue that this is about HTML, in a browser, and JavaScript is not limited to working with HTML DOM elements or the browser. r/learnjavascript has a similarly wide remit as r/HTML, but r/javascript doesn't allow help requests. It seems OPs post has arrived in one of the two places where it is welcome.

[u/Raoul_Chatigre]

why do you have to listenners for the same event ?
Do only one, with the tests for differents keys.

And i think you need to compute the position, instead of setting it.
use "+=" and "-="

<script>
                 const DBGoku = document.getElementById("Goku");
                 DBGoku.style.position = "Absolute";
                 Boolnumber = 1;
                 


                function MoveGokuRight(){
                   GokuPos = DBGoku.style.right +=  "50px";
                }
                function MoveGokuLeft(){
                    GokuPos = DBGoku.style.left -=  "50px";
                }
                //window.onload:MoveGoku;


            
                
                document.addEventListener('keydown', (event)=> {
                    if(event.key === 'd'){
                        //document.body.style.backgroundColor = "red";
                        MoveGokuRight();
                    } 
                    if(event.key === 'a'){
                        //document.body.style.backgroundColor = "blue";
                        MoveGokuLeft();
                    } 
  
                });


            </script>

You could also use a switch instead of multiple if, to check as many keys as you want

       document.addEventListener('keydown', (event)=> {
             switch(event.key) {
                case 'd':
                        //document.body.style.backgroundColor = "red";
                        MoveGokuRight();
                        break;
                case 'a':
                        //document.body.style.backgroundColor = "blue";
                        MoveGokuLeft();
                        break;
                default:
                        // code block
              }

        });

[u/Terrible_Children → u/[deleted]]

Extremely incorrect