CODEWITHSUNDEEP
javascript
user19724638
user19724638

Reputation:

javascript input number - detect increase and decrease

For number, I want it to perform different action if the up button is clicked, and different action if the down button is clicked. I tried to capture it with onmouseup and onmousedown. but still both are triggered. How do I know if number up was clicked and number down was clicked? I need to operate according to previous value and next value of number. so for example the value of number is 12. if the user increments it and makes it 13, I have to do a different action.

<input type="number" onmouseup="alert('clicked up');" onmousedown="alert('clicked down');" onkeydown="return false" min="1" max="@selvalue.Selection.MaximumChoice" id="[email protected]" value="1" onchange="numberValueChange(@selvalue.ValueId, this.value,@selvalue.SelectionId);" class="form-control mb-1" style="visibility:hidden" />

New Added Codes:

function numberValueChange(optionValueId, numberValue, selectionId) {

            var number = document.getElementById('number_' + selectionId);
            var thisnumber = document.getElementById('option_' + optionValueId);


            let oldValue = parseInt(thisnumber.value);

            thisnumber.addEventListener('change', (e) => {
                console.log('eski deger: ', oldValue);
                let newValue = parseInt(e.target.value);
                console.log('yeni deger: ', newValue);
                if (newValue > oldValue) {
                    console.log('bu deger arttı.');
                    var options = Array.from(document.querySelectorAll("#multipleselection option"))
                    options.filter(option => option.value.includes(optionValueId))[0].value = (optionValueId + ',' + numberValue);
                    number.value++;

                } else if (newValue < oldValue) {
                    console.log('bu deger azaldı.');
                    thisnumber.value--;
                }

            });

        }

Upvotes: 0

Views: 1191

Answers (2)

David
David

Reputation: 218827

Instead of trying to detect mouse clicks, detect changes to the value. Regardless of how those changes were made.

Store the value somewhere, then compare it when the input changes. This will tell you if the new value is higher or lower. For example:

let myInput = document.querySelector('input');
let oldValue = parseInt(myInput.value || 0);

function numberValueChange(el) {

  // other code you may have, etc.
  
  console.log('old value: ', oldValue);
  let newValue = parseInt(el.value);
  console.log('new value: ', newValue);
  if (newValue > oldValue) {
    console.log('The value increased.');
  } else if (newValue < oldValue) {
    console.log('The value decreased.');
  }
  oldValue = newValue;

}
<input type="number" onkeydown="return false" value="1" onchange="numberValueChange(this)" />

Upvotes: 1

Alex
Alex

Reputation: 1072

onmouseup means the mouse button has been released, not that the mouse has clicked the up button. Just use a change event then write some code to detect whether the value went up or down.

Upvotes: 0

Related Questions