This is in connection to my previous question related to moving a stick figure on button click.
The new problem is that a click is sent to two buttons simultaneously. Everything works fine for left and right buttons. Top and down get screwed up. HTML \[code\]<!DOCTYPE html><html><style> #stage{ width: 100px; height: 100px; position: relative; border-style: dashed; border-color: gray; border-width: medium; } #actor{ width: 13px; height: 15px; position: absolute; left: 0; top: 0; background-image: url("E:/Website Projects/man.PNG"); -webkit-transition: all 2s ease-out 0s; -moz-transition: all 2s ease-out 0s; transition: all 2s ease-out 0s; }</style><body> <div id="stage"> <div id="actor"></div> </div> <div> <button class="control" id="top">TOP</button> <br> <button class="control" id="left">LEFT</button> <button class="control" id="right">RIGHT</button> <br> <button class="control" id="down">DOWN</button> </div></body><script> var vertical = 0; var horizontal = 0; var shift = 5; var top = document.querySelector("#top"); var left = document.querySelector("#left"); var right = document.querySelector("#right"); var down = document.querySelector("#down"); top.addEventListener("click",moveTop,false); left.addEventListener("click",moveLeft,false); right.addEventListener("click",moveRight,false); down.addEventListener("click",moveDown,false); function moveTop(){ var actor = document.querySelector("#actor"); if(vertical>0){ --vertical; actor.style.top = shift*vertical + "px"; console.log("TOP " + "VERTICAL: " + vertical); } } function moveDown(){ var actor = document.querySelector("#actor"); if(vertical<17){ ++vertical; actor.style.top = shift*vertical + "px"; console.log("DOWN " + "VERTICAL: " + vertical); } } function moveRight(){ var actor = document.querySelector("#actor"); if(horizontal<17){ ++horizontal; actor.style.left = shift*horizontal + "px"; console.log("RIGHT " + "HORIZONTAL: " + horizontal); } } function moveLeft(){ var actor = document.querySelector("#actor"); if(horizontal>0){ --horizontal; actor.style.left = shift*horizontal + "px"; console.log("LEFT " + "HORIZONTAL: " + horizontal); } }</script></html> \[/code\] Console Log \[code\]DOWN VERTICAL: 1 floating%20man.html:71TOP VERTICAL: 0 floating%20man.html:62 \[/code\]That is the log on clicking \[code\]down\[/code\]. \[code\]Top\[/code\] won't work cause that is how it has been coded. \[code\]Top\[/code\] will work only if \[code\]vertical\[/code\] has a non-zero value.Why is this happening ? How to solve it?
The new problem is that a click is sent to two buttons simultaneously. Everything works fine for left and right buttons. Top and down get screwed up. HTML \[code\]<!DOCTYPE html><html><style> #stage{ width: 100px; height: 100px; position: relative; border-style: dashed; border-color: gray; border-width: medium; } #actor{ width: 13px; height: 15px; position: absolute; left: 0; top: 0; background-image: url("E:/Website Projects/man.PNG"); -webkit-transition: all 2s ease-out 0s; -moz-transition: all 2s ease-out 0s; transition: all 2s ease-out 0s; }</style><body> <div id="stage"> <div id="actor"></div> </div> <div> <button class="control" id="top">TOP</button> <br> <button class="control" id="left">LEFT</button> <button class="control" id="right">RIGHT</button> <br> <button class="control" id="down">DOWN</button> </div></body><script> var vertical = 0; var horizontal = 0; var shift = 5; var top = document.querySelector("#top"); var left = document.querySelector("#left"); var right = document.querySelector("#right"); var down = document.querySelector("#down"); top.addEventListener("click",moveTop,false); left.addEventListener("click",moveLeft,false); right.addEventListener("click",moveRight,false); down.addEventListener("click",moveDown,false); function moveTop(){ var actor = document.querySelector("#actor"); if(vertical>0){ --vertical; actor.style.top = shift*vertical + "px"; console.log("TOP " + "VERTICAL: " + vertical); } } function moveDown(){ var actor = document.querySelector("#actor"); if(vertical<17){ ++vertical; actor.style.top = shift*vertical + "px"; console.log("DOWN " + "VERTICAL: " + vertical); } } function moveRight(){ var actor = document.querySelector("#actor"); if(horizontal<17){ ++horizontal; actor.style.left = shift*horizontal + "px"; console.log("RIGHT " + "HORIZONTAL: " + horizontal); } } function moveLeft(){ var actor = document.querySelector("#actor"); if(horizontal>0){ --horizontal; actor.style.left = shift*horizontal + "px"; console.log("LEFT " + "HORIZONTAL: " + horizontal); } }</script></html> \[/code\] Console Log \[code\]DOWN VERTICAL: 1 floating%20man.html:71TOP VERTICAL: 0 floating%20man.html:62 \[/code\]That is the log on clicking \[code\]down\[/code\]. \[code\]Top\[/code\] won't work cause that is how it has been coded. \[code\]Top\[/code\] will work only if \[code\]vertical\[/code\] has a non-zero value.Why is this happening ? How to solve it?