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

"Error: The property $notify is not found in the type" - Unable to utilize an npm package in Vue application

Personalizing text in HTML using JavaScript results

Ensure accurate detection of invalid values for SVG Elements in React using jest testing framework

Creating objects that are a fraction of another's width

unable to insert logo into HTML

Property-based Angular Material row grouping in a mat-table is a powerful feature that enhances

What is the best way to implement a day timer feature using JavaScript?

:Incorporating active hyperlinks through javascript

Utilizing a JavaScript Library in your Scala.js Project: A Step-by-Step Guide

Once a session is established within a route, it cannot be accessed or utilized in any other routes within the

A guide on incorporating a Java loop with Selenium automation

Is it possible to observe the website functionalities and execute them directly from the console?

What is the best way to transform the data received from this function into a DataTable that can be used with the Google Charts API?

Customize the appearance of the Vue.js datepicker starting from today's date

An element in CSS that has a position of fixed and a width of 100% surpasses the dimensions of its

What is the best way to display user input within a paragraph using React?

The Vue Watch feature fails to trigger when incorporating axios

What is the best way to initiate a fresh AJAX request whenever the submit button is pressed?

Executing React Fetch API Twice upon loading the page

Enhance with Laravel combined with AngularJS