Create a spinner control on an HTML webpage with the help of JavaScript

Question

Create a spinner control on an HTML webpage with the help of JavaScript

I am attempting to create a spinner control on my webpage, and I have tried the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Simple spinner</title>

    <script type="text/javascript">
        function RotateSpinner(spinnerId, up) {
            var ele=document.getElementById(spinnerId);
            ele.value=parseInt(ele.value)+up;
                var t=setTimeout(function(){
                    if(window.rotate_start)
                        RotateSpinner(spinnerId,up);
                    else
                        clearTimeout(t);
                },500);

        }


    </script>

    <style>
        *
        {
            padding: 0;
            margin: 0;
        }
        .spinner
        {
            list-style: none;
            display: inline-block;
            line-height: 0;
            vertical-align: middle;
        }
        .spinner input
        {
            font-size: .45em;
            border-width: .5px;
            height: 1.5em;
            width: 2em;
        }
    </style>
</head>
<body>
    <input id="spinner" type="text" value="0" />
    <ul class="spinner">
        <li>
            <input type="button" value="&#9650;" onmousedown="window.rotate_start=true;RotateSpinner('spinner', 1)" onmouseup="window.rotate_start=false;"/>
        </li>
        <li>
            <input type="button" value="&#9660;" onmousedown="window.rotate_start=true;RotateSpinner('spinner', -1)" onmouseup="window.rotate_start=false;"/>
        </li>
    </ul>
</body>
</html>

However, the spinner does not behave as expected. When I click the "up" button, I want the value to increment only once, but sometimes it adds the value multiple times.

Could someone please review this and make the necessary fixes?

For a live example, visit this link

javascript spinner

Answer 1

Answer №1

Utilizing an interval can streamline the code significantly, as confirmed through testing on IE9, Chrome21, and FF14. I conducted my testing using http://jsfiddle.net/KmMCE/3/, although I have yet to update the sample.

Here is the markup:

    <input id="spinner" type="text" value="0" />
    <input type="button" value="&#9650;"
      onmousedown="spinnerMouseDown('spinner', 1);" 
onmouseup="stopSpinner();" onmouseout="stopSpinner();" />

    <input type="button" value="&#9660;"
      onmousedown="spinnerMouseDown('spinner', -1);" 
onmouseup="stopSpinner();" onmouseout="stopSpinner();" />

The JavaScript snippet is as follows:

function spinnerMouseDown(id, value) {
    var el = document.getElementById(id);
    window.spinnerTimer = window.setInterval(function(){
      el.value = parseInt(el.value) + value;
    }, 100);
}

function stopSpinner() {
    window.clearInterval(window.spinnerTimer);
}

Answer 2

Utilizing an interval can streamline the code significantly, as confirmed through testing on IE9, Chrome21, and FF14. I conducted my testing using http://jsfiddle.net/KmMCE/3/, although I have yet to update the sample.

Here is the markup:

    <input id="spinner" type="text" value="0" />
    <input type="button" value="&#9650;"
      onmousedown="spinnerMouseDown('spinner', 1);" 
onmouseup="stopSpinner();" onmouseout="stopSpinner();" />

    <input type="button" value="&#9660;"
      onmousedown="spinnerMouseDown('spinner', -1);" 
onmouseup="stopSpinner();" onmouseout="stopSpinner();" />

The JavaScript snippet is as follows:

function spinnerMouseDown(id, value) {
    var el = document.getElementById(id);
    window.spinnerTimer = window.setInterval(function(){
      el.value = parseInt(el.value) + value;
    }, 100);
}

function stopSpinner() {
    window.clearInterval(window.spinnerTimer);
}

Answer 3

Answer №2

Here are the key issues that need to be addressed:

The handling of the onmouseup and onmousedown events needs improvement.
- An onmousedown event in a button can still trigger even if the subsequent onmouseup event occurs outside the button. This results in inaccurate tracking of the window.rotate_start variable. Simply relying on onmouseup and onmousedown events is insufficient for achieving the desired functionality.
- To resolve this, implement a global event handler for both onmouseup and onmousedown events that maintains the state in a variable. Additionally, use other variables to monitor the occurrence of onmouseover and onmouseout events on the buttons. This will help determine whether to update the value or not, along with how to adjust it (+1/-1).
Accumulation of timeouts during single clicks is causing undesired effects as mentioned in the question. To address this issue, introduce a variable that tracks whether a timeout has been set, and reset the timeout when both onmousedown and onmouseover events for a button are triggered (i.e., upon a single click, disregard any pending timer executions).

For a practical example, refer to the following fiddle: http://jsfiddle.net/KmMCE/3/

<input type="button" value="&#9650;"
        onmouseover="window.upfocus = 1;" onmouseout="window.upfocus = 0;" />

<input type="button" value="&#9660;"
            onmouseover="window.downfocus = 1;" onmouseout="window.downfocus = 0;" />

var timingOut = false;
var upfocus = 0;
var downfocus = 0;
var mouseDown = 0;
document.body.onmousedown = function() {

    mouseDown = 1;
    if (window.upfocus == 1) {
        if (timingOut) {
            clearTimeout(t);
            timingOut = false;
        }
        RotateSpinner('spinner', 1);
    }
    else if (window.downfocus == 1) {
        if (timingOut) {
            clearTimeout(t);
            timingOut = false;
        }
        RotateSpinner('spinner', -1);
    }
}
document.body.onmouseup = function() {
    mouseDown = 0;
}

function RotateSpinner(spinnerId, up) {
    var ele = document.getElementById(spinnerId);
    ele.value = parseInt(ele.value) + up;
    timingOut = true;
    t = setTimeout(function() {
        if (mouseDown == 1 && up == 1 && window.upfocus == 1) {
            RotateSpinner(spinnerId, up);
        }
        else if (mouseDown == 1 && up == -1 && window.downfocus == 1) {
            RotateSpinner(spinnerId, up);
        }
        else {
            clearTimeout(t);
            timingOut = false;
        }
    }, 500);

}

Answer 4

Here are the key issues that need to be addressed:

The handling of the onmouseup and onmousedown events needs improvement.
- An onmousedown event in a button can still trigger even if the subsequent onmouseup event occurs outside the button. This results in inaccurate tracking of the window.rotate_start variable. Simply relying on onmouseup and onmousedown events is insufficient for achieving the desired functionality.
- To resolve this, implement a global event handler for both onmouseup and onmousedown events that maintains the state in a variable. Additionally, use other variables to monitor the occurrence of onmouseover and onmouseout events on the buttons. This will help determine whether to update the value or not, along with how to adjust it (+1/-1).
Accumulation of timeouts during single clicks is causing undesired effects as mentioned in the question. To address this issue, introduce a variable that tracks whether a timeout has been set, and reset the timeout when both onmousedown and onmouseover events for a button are triggered (i.e., upon a single click, disregard any pending timer executions).

For a practical example, refer to the following fiddle: http://jsfiddle.net/KmMCE/3/

<input type="button" value="&#9650;"
        onmouseover="window.upfocus = 1;" onmouseout="window.upfocus = 0;" />

<input type="button" value="&#9660;"
            onmouseover="window.downfocus = 1;" onmouseout="window.downfocus = 0;" />

var timingOut = false;
var upfocus = 0;
var downfocus = 0;
var mouseDown = 0;
document.body.onmousedown = function() {

    mouseDown = 1;
    if (window.upfocus == 1) {
        if (timingOut) {
            clearTimeout(t);
            timingOut = false;
        }
        RotateSpinner('spinner', 1);
    }
    else if (window.downfocus == 1) {
        if (timingOut) {
            clearTimeout(t);
            timingOut = false;
        }
        RotateSpinner('spinner', -1);
    }
}
document.body.onmouseup = function() {
    mouseDown = 0;
}

function RotateSpinner(spinnerId, up) {
    var ele = document.getElementById(spinnerId);
    ele.value = parseInt(ele.value) + up;
    timingOut = true;
    t = setTimeout(function() {
        if (mouseDown == 1 && up == 1 && window.upfocus == 1) {
            RotateSpinner(spinnerId, up);
        }
        else if (mouseDown == 1 && up == -1 && window.downfocus == 1) {
            RotateSpinner(spinnerId, up);
        }
        else {
            clearTimeout(t);
            timingOut = false;
        }
    }, 500);

}

Create a spinner control on an HTML webpage with the help of JavaScript

Answer №1

Answer №2

Similar questions

I am attempting to assign a default value to a TextField by retrieving data from a GetMapping call in React, however, the value is not being successfully set

Oops! Looks like there was an issue with defining Angular in AngularJS

What is the method of displaying a querystring on my Angular view page without relying on a controller?

Issue with content overlapping when hamburger icon is tapped on mobile device

Attempting to alter an image with a click and then revert it back to its original state

Error: OpenAI's transcription API has encountered a bad request issue

Dealing with VueJS - Sharing an array of data from a child to a parent component using v-model

Exploring the implementation of Chain Map or Chain Filter within an Angular Http request that delivers a promise

Choose all the alternative A radio buttons utilizing JavaScript

AngularJS UI.Router ActiveState implemented with a dropdown menu feature

I have successfully implemented the Context API in my Next.js project and everything is functioning smoothly. However, I encountered an error while using TypeScript

Using JavaScript, you can filter an array of objects based on a specific search input

Generating pop-up upon loading with CSS3

How to Handle Tab Navigation on a Mobile Website without Javascript?

Node.js MySQL REST API query fails to execute

Implement lazy loading functionality in Django to dynamically load data as the user scrolls

How to create a vertically scrollable div within another div by utilizing scrollTop in jQuery

I'm struggling to make this background show up in a div

Replace the value of Undefined with an empty string

submission of form data and automatic redirection to another page