Javascript - Button animation malfunctioning after first click

Question

Javascript - Button animation malfunctioning after first click

One issue I'm facing is with an animation that is triggered using the onmousedown event. Another function is supposed to stop the animation when onmouseup is detected.

The problem arises after the first time it works correctly. Subsequent attempts to use the buttons fail to trigger any movement. It just seems to get stuck.

Below is my HTML code (index.htm):

<html>
<head><link rel='stylesheet' href='style.css'></head>
<body>
    <img id='player' src='img/player.png' style='height:64px;'></img>
    <div class='buttons'>
        <button id='moveleft' onmousedown="OnButtonDownl (this)" onmouseup="OnButtonUpl (this)"><--</button>
        <button id='moveright' onmousedown="OnButtonDownr (this)" onmouseup="OnButtonUpr (this)">--></button>
    </div>
</body>
</html>


<script type='text/javascript' src='move.js'></script>

This is my javascript code (move.js):

var elem = document.getElementById("player");
function OnButtonDownl (button) {
var posl = document.getElementById("player").style.left;
window.idl = setInterval(framel, 5);
function framel() {
    posl--;
    elem.style.left = posl + 'px';
}}
function OnButtonUpl (button) {
    clearInterval(idl);
}

var elem = document.getElementById("player");
function OnButtonDownr (button) {
var posr = document.getElementById("player").style.left;
window.idr = setInterval(framer, 5);
function framer() {
    posr++;
    elem.style.left = posr + 'px';
}}
function OnButtonUpr (button) {
    clearInterval(idr);
}

Just for reference, here is my css (style.css):

body {
  width: 100%;
  height: 100%;
position:relative;
margin:0;
overflow:hidden;
}
#player {
  position: absolute;
  left:0;
  bottom:0;
}
.buttons {
position:absolute;
right:0;
bottom:0;
}

Any assistance would be greatly appreciated.

javascript html css animation

Answer 1

Answer №1

You are encountering two specific issues.

Initially, when you retrieve the values for posl and posr, it results in an empty string which is coerced to 0 by JavaScript.
Subsequently, the use of -- and ++ operations fails after adding px to the values of posl and posr, turning them into strings.

The expression posl-- (or posr++) can increment the coerced value of

0</code successfully. This explains why it works on the first iteration. However, upon the next <code>mousedown

event,

document.getElementById("player").style.left

now holds a string like "-1px" which does not coerce to

0</code. To remedy this, you can utilize <code>parseInt()

when storing the values of posl and posr, with a fallback value of 0 provided, as parseInt("") returns NaN.

To address this issue properly, consider making similar adjustments when handling the value of posr:

var posl = parseInt( document.getElementById("player").style.left, 10 ) || 0;

var elem = document.getElementById("player");

function OnButtonDownl(button) {
  //var posl = document.getElementById("player").style.left;
  var posl = parseInt(document.getElementById("player").style.left, 10) || 0;
  window.idl = setInterval(framel, 5);

  function framel() {
    posl--;
    elem.style.left = posl + 'px';
  }
}

function OnButtonUpl(button) {
  clearInterval(idl);
}

var elem = document.getElementById("player");

function OnButtonDownr(button) {
  //var posr = document.getElementById("player").style.left;
  var posr = parseInt(document.getElementById("player").style.left, 10) || 0;
  window.idr = setInterval(framer, 5);

  function framer() {
    posr++;
    elem.style.left = posr + 'px';
  }
}

function OnButtonUpr(button) {
  clearInterval(idr);
}

body {
  width: 100vw;// changed for example only
  height: 100vh;// changed for example only
  position: relative;
  margin: 0;
  overflow: hidden;
}
#player {
  position: absolute;
  left: 0;
  bottom: 0;
}
.buttons {
  position: absolute;
  right: 0;
  bottom: 0;
}

<img id='player' src='//placekitten.com/102/102' />
<div class='buttons'>
  <button id='moveleft' onmousedown="OnButtonDownl (this)" onmouseup="OnButtonUpl (this)">Left</button>
  <button id='moveright' onmousedown="OnButtonDownr (this)" onmouseup="OnButtonUpr (this)">Right</button>
</div>

Answer 2

You are encountering two specific issues.

Initially, when you retrieve the values for posl and posr, it results in an empty string which is coerced to 0 by JavaScript.
Subsequently, the use of -- and ++ operations fails after adding px to the values of posl and posr, turning them into strings.

The expression posl-- (or posr++) can increment the coerced value of

0</code successfully. This explains why it works on the first iteration. However, upon the next <code>mousedown

event,

document.getElementById("player").style.left

now holds a string like "-1px" which does not coerce to

0</code. To remedy this, you can utilize <code>parseInt()

when storing the values of posl and posr, with a fallback value of 0 provided, as parseInt("") returns NaN.

To address this issue properly, consider making similar adjustments when handling the value of posr:

var posl = parseInt( document.getElementById("player").style.left, 10 ) || 0;

var elem = document.getElementById("player");

function OnButtonDownl(button) {
  //var posl = document.getElementById("player").style.left;
  var posl = parseInt(document.getElementById("player").style.left, 10) || 0;
  window.idl = setInterval(framel, 5);

  function framel() {
    posl--;
    elem.style.left = posl + 'px';
  }
}

function OnButtonUpl(button) {
  clearInterval(idl);
}

var elem = document.getElementById("player");

function OnButtonDownr(button) {
  //var posr = document.getElementById("player").style.left;
  var posr = parseInt(document.getElementById("player").style.left, 10) || 0;
  window.idr = setInterval(framer, 5);

  function framer() {
    posr++;
    elem.style.left = posr + 'px';
  }
}

function OnButtonUpr(button) {
  clearInterval(idr);
}

body {
  width: 100vw;// changed for example only
  height: 100vh;// changed for example only
  position: relative;
  margin: 0;
  overflow: hidden;
}
#player {
  position: absolute;
  left: 0;
  bottom: 0;
}
.buttons {
  position: absolute;
  right: 0;
  bottom: 0;
}

<img id='player' src='//placekitten.com/102/102' />
<div class='buttons'>
  <button id='moveleft' onmousedown="OnButtonDownl (this)" onmouseup="OnButtonUpl (this)">Left</button>
  <button id='moveright' onmousedown="OnButtonDownr (this)" onmouseup="OnButtonUpr (this)">Right</button>
</div>

Answer 3

Answer №2

I revised your code and it is now functioning properly (at least for me).

function Move(elem){
    this.interval;

    var posr = parseInt(getComputedStyle(document.getElementById("player")).left);

    this.handleEvent = function(event) {
      switch (event.type) {
        case 'mousedown':
            this.interval = setInterval(function() {
                if (event.target.id == 'moveright') {
                    posr++;
                } else if (event.target.id == 'moveleft'){
                    posr--;
                }
                document.getElementById("player").style.left = posr + 'px';

            },5);
            break;
        case 'mouseup':
            clearInterval(this.interval);
            break;
      }
  }
  elem.addEventListener('mousedown', this,  false);
  elem.addEventListener('mouseup', this,  false);

}

var button_right = document.getElementById("moveright");
var button_left = document.getElementById("moveleft");

Move(button_right);
Move(button_left);

Additionally, in the HTML you can remove JavaScript event listeners (only the IDs are necessary).

Answer 4

I revised your code and it is now functioning properly (at least for me).

function Move(elem){
    this.interval;

    var posr = parseInt(getComputedStyle(document.getElementById("player")).left);

    this.handleEvent = function(event) {
      switch (event.type) {
        case 'mousedown':
            this.interval = setInterval(function() {
                if (event.target.id == 'moveright') {
                    posr++;
                } else if (event.target.id == 'moveleft'){
                    posr--;
                }
                document.getElementById("player").style.left = posr + 'px';

            },5);
            break;
        case 'mouseup':
            clearInterval(this.interval);
            break;
      }
  }
  elem.addEventListener('mousedown', this,  false);
  elem.addEventListener('mouseup', this,  false);

}

var button_right = document.getElementById("moveright");
var button_left = document.getElementById("moveleft");

Move(button_right);
Move(button_left);

Additionally, in the HTML you can remove JavaScript event listeners (only the IDs are necessary).

Answer 5

Answer №3

It's considered good practice to ensure that your script tag is placed within your html tags:

<html>
<head>...</head>
<body>...</body>
    <script type='text/javascript' src='move.js'></script>
</html>

Once you've done that, try out this solution:

HTML:

<html>
<head><link rel='stylesheet' href='style.css'></head>
<body>
    <img id='player' src='https://placeimg.com/54/45/any' style='height:64px;'></img>
    <div class='buttons'>
        <button id='moveleft' onmousedown="OnButtonDown('left')" onmouseup="OnButtonUp()"><--</button>
        <button id='moveright' onmousedown="OnButtonDown('right')" onmouseup="OnButtonUp()">--></button>
    </div>

<script type='text/javascript' src='move.js'></script>
</body>
</html>

And here's the corresponding JavaScript code:

var nIntervId;
var b;
var elem = document.getElementById("player");

var posl = document.getElementById("player").style.left;

function OnButtonDown(button) {
b = button;
nIntervId = setInterval(frame, 5);
}

function frame() {
  if(b==='left'){
    posl--;
    elem.style.left = posl + 'px';}
  else{
    posl++;
    elem.style.left = posl + 'px';
  }
}

function OnButtonUp() {
    clearInterval(nIntervId);
}

Visit this link for a live demo of the code.

Answer 6

It's considered good practice to ensure that your script tag is placed within your html tags:

<html>
<head>...</head>
<body>...</body>
    <script type='text/javascript' src='move.js'></script>
</html>

Once you've done that, try out this solution:

HTML:

<html>
<head><link rel='stylesheet' href='style.css'></head>
<body>
    <img id='player' src='https://placeimg.com/54/45/any' style='height:64px;'></img>
    <div class='buttons'>
        <button id='moveleft' onmousedown="OnButtonDown('left')" onmouseup="OnButtonUp()"><--</button>
        <button id='moveright' onmousedown="OnButtonDown('right')" onmouseup="OnButtonUp()">--></button>
    </div>

<script type='text/javascript' src='move.js'></script>
</body>
</html>

And here's the corresponding JavaScript code:

var nIntervId;
var b;
var elem = document.getElementById("player");

var posl = document.getElementById("player").style.left;

function OnButtonDown(button) {
b = button;
nIntervId = setInterval(frame, 5);
}

function frame() {
  if(b==='left'){
    posl--;
    elem.style.left = posl + 'px';}
  else{
    posl++;
    elem.style.left = posl + 'px';
  }
}

function OnButtonUp() {
    clearInterval(nIntervId);
}

Visit this link for a live demo of the code.

Javascript - Button animation malfunctioning after first click

Answer №1

Answer №2

Answer №3

Similar questions

Using HTML5's getCurrentPosition function with Meteor

Having trouble getting my local website to load the CSS stylesheet through Express and Node.js in my browser

What is the best way to retrieve the post JSON data in the event of a 404 error?

for each and every object, execute the asynchronous function

php json with multiple dimensions

How can you show a green check mark next to an input field in AngularJS after inputting valid data?

Tips for displaying a Rails action without a layout in html format using Ajax

Internal server error frequently occurs when there is an issue with Ajax requests in a Laravel application

Tips for incorporating tabs into a Rails 3 application with the help of Sass/Haml or CoffeeScript

Even though I have successfully stored a key value pair in LocalStorage using JSON stringify and setItem, the data does not persist after the page is refreshed

Sharing and displaying images on Sails JS platform

Tips for achieving a blurred background image effect when hovering, while keeping the text unaffected

The table toggle feature seems to be malfunctioning in Safari, whereas it works perfectly in Chrome

Experiencing a problem with value formatting while attempting to implement tremor for charts in React with Next.js version 13

The attempt to create the property 'and_ff' on the string 'and_chr 89' has failed

Unique style pattern for parent links with both nested and non-nested elements

Identify all td inputs within a TR element using jQuery

Trouble with z-index functionality in jQuery datatable

Retrieve the value from an input field when the value is returned from JavaScript

Guide on how to show the index value of an array on the console in Angular 2