Cannot limit value in real time

Question

In my code, I have an HTML <input> that takes numbers and that has the following function linked to the onclick attribute:

function checkValue() {
        let sender = document.getElementById("articoli-quantita-uscita");
        let min = sender.min;
        let max = sender.max;

        let value = parseInt(sender.value);

        if (value>max) {
            sender.value = max;
        } else if (value<min) {
            sender.value = min;
        }
    }

<input class="form-control" type="number" id="articoli-quantita-uscita" name="articoli-quantita-uscita" value="1" onclick="checkValue()">

I have the function placed in a tag at the top of my body.

This function takes the input value and transforms it to the minimum or the maximum if the user inputs manually (from the keyboard and not from the input arrows) a value greater that the maximum or lower that the minimum.

Even if I have used this piece of code in other element of my WebApp and it always worked, it doesn't seem to work now, and actually the error it produces is that:

I type a value greater/lower than the maximum,
the input value doesn't change,
I click outside the input box ,
I click the input box again and the input value "refreshes" as the maximum/minimum.

Also, I set the maximum and the minimum programmatically at some point in the code from data I receive from the server, I log the maximum after I set it and it shows the correct value.

I don't understand why in this HTML page (which is very similar to the others) it doesn't work, whereas in other HTML pages in my project it does what it's supposed to.

You might wanna attach the event handler to the on blur event — Abir Taheer, Sep 29 '21 at 07:03
Try `onchange` as an event instead of click and please use a proper event listener instead of the `on...` attribute — empiric, Sep 29 '21 at 07:03
`let min = sender.min; let max = sender.max;` - so what values are you expecting to read here, considering that your input field has neither `max` nor `min` attribute set? — CBroe, Sep 29 '21 at 07:05
Inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. Consider using the [`input` event](//developer.mozilla.org/docs/Web/API/HTMLElement/input_event) instead. — Sebastian Simon, Sep 29 '21 at 07:06
Please use `parseInt` [_with_ the second parameter, `10`](/q/16880327/4642212). Consider using [`Number`](//developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number#Function_syntax) or [`parseFloat`](//developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) instead, or, specifically for ``s, [`.valueAsNumber`](//developer.mozilla.org/docs/Web/API/HTMLInputElement#Properties). — Sebastian Simon, Sep 29 '21 at 07:08
@CBroe I set the input max and min programmatically, as I stated in my question, at some point in the code, as soon as the HTML loads. — beartice, Sep 29 '21 at 07:20

Abir Taheer · Answer 1 · 2021-09-29T07:41:18.837

0

You can use the addEventListener method to attach the event listener directly instead of using inline javascript.

You also need to listen for when the user changes the input rather than when they click on it otherwise your validation might not be applied in some situations.

The change event is good for doing that.

let sender = document.getElementById("articoli-quantita-uscita");

sender.addEventListener("input", function (event){
  let min = sender.min;
  let max = sender.max;

  let value = parseInt(sender.value);

  if (value > max) {
    sender.value = max;
  } else if (value < min) {
    sender.value = min;
  }
});

<input 
  class="form-control" 
  type="number" 
  id="articoli-quantita-uscita" 
  name="articoli-quantita-uscita" 
  value="1" 
  min="0" 
  max="10" 
  style="width: 200px"
  >

edited Sep 29 '21 at 07:41

answered Sep 29 '21 at 07:08

Abir Taheer

2,502
3
12
34

I've set placeholder minimum and maximum values for now but as you said you'll be updating those dynamically and this should still work then – Abir Taheer Sep 29 '21 at 07:13
Thanks, this seems to work too. Unfortunately, it's still not as simoultaneus as it is for the other HTML pages. Now if i click Enter, or Tab, or if I click outside the input box, it refreshed the value to the correct one, but in the other pages it does this as I am typing the number. – beartice Sep 29 '21 at 07:26
@beartice If you want it to happen like that, change the `"change"` event to `"keyup"` or `"input"` and it'll work as you described. I've updated the answer to reflect it. – Abir Taheer Sep 29 '21 at 07:40

score 0 · Answer 2 · answered Sep 29 '21 at 07:13

0

Change it from onclick() to onchange().

answered Sep 29 '21 at 07:13

Christopher Vickers

1,773
1
14
18

It seems to work, but it's still not as simoultaneus as it is for the other HTML pages. Now if i click Enter, or Tab, or if I click outside the input box, it refreshed the value to the correct one, but in the other pages it does this as I am typing the number. – beartice Sep 29 '21 at 07:22
@beartice that really doesn't make much sense. Are you sure you don't have either type event handlers added in those other places? `click` would only fire when you click into the element and it receives focus. And what do you even mean when you say _"Now if i click Enter, or Tab"_ - since when do keyboard keys get _clicked_? – CBroe Sep 29 '21 at 07:26
Based on what Cbroe said, it sounds like you have other events tied to it. If that is the case, try stopping the event propagation. It means the changes you make to that form element don't affect other things higher up the DOM or 'bubbling'. – Christopher Vickers Sep 29 '21 at 07:30
@CBroe Thank you for your observations. I actually noticed that in my other pages i used the oninput attribute instead of onclick/onchange. – beartice Sep 29 '21 at 07:37

Cannot limit value in real time

2 Answers2