When I go between if I go between 3 and 10, its marked as greater than 20

If the the element Wager is set to anything above 3 and under 10. Javascript marks it as above 20.

<input type="number" id="wager" step="0.1" min="0.1" max="20.0" placeholder="0.1"/>

function setTwoNumberDecimal(event) {
    this.value = parseFloat(this.value).toFixed(1); 

    console.log(this.value) // Shows the current value (debugging)
    console.log(this.max) // Shows the max value allowed (debugging)
    console.log(this.value > this.max) // Shows if its above the max allowed (debugging)

    if (this.value > this.max) {
        this.value = this.max
    }

    if (this.value < 0.1) {
        this.value = 0.1
    }
}

I was expecting so anything between 3 and 10 would be marked as lower than 20 but yeh. It probably is something stupid.

This behavior is a result of comparing strings. First, this.value and this.max return strings from the HTML element, even after being assigned a number value. Second, the method toFixed() also returns a string. Instead we'll apply it after comparing values.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

function setTwoNumberDecimal(event) {
  var _thisValue = parseFloat(this.value);
  var _thisMin = parseFloat(this.min);
  var _thisMax = parseFloat(this.max);

  if (_thisValue > _thisMax) {
    this.value = _thisMax.toFixed(1);
  } else if (_thisValue < _thisMin) {
    this.value = _thisMin.toFixed(1);
  } else {
    this.value = _thisValue.toFixed(1);
  }
}

<!-- end snippet -->