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

Create a PDF document and provide a reply

Regular expressions should be utilized in a way that they do not match exactly with a

How to populate the space beneath the `AreaChart` curve in `recharts` when data includes positive and negative values

The attempt to install "expo-cli" with the command "npm install -g expo-cli" was unsuccessful

I encountered an issue stating, "The function `req.redirect` is not recognized."

Mysterious obsidian container lurking in the background of the video on Chrome version 67.0.3396

Incorporate Calendly Script into your NextJs application

What is the process for utilizing GruntFile.coffee and package.json to extract or create the Lungo.js example files?

Utilizing jQuery to Bind AJAX Events without a DOM Element

Enhancing the background of a website with the power of CSS

The error callback for Ajax is triggered even though the JSON response is valid

AngularJS selection controls: checkbox and dropdown menus

A guide to organizing page components across multiple `/pages` directories in a Next.js application

Storing Documents on Your Device

Just starting out with Angular - facing issues with setting up in eclipse

Difficulty in updating Vue variable value following a request

reveal one div and conceal another using Bootstrap's collapse feature

Implementing conditional ng-show based on checkbox status in AngularJS

`Cannot recompile the `Product` model as it has already been compiled. Please try again

What is the best way to incorporate multiple pages into a Node JS and Express application?