Pure JavaScript solution number input will display 2 decimal places

Question

I'm trying to use the following code (found here: Make an html number input always display 2 decimal places ) to force number inputs to display two decimal places when the input loses focus/onchange:

function setDecimal(event) {
    this.value = parseFloat(this.value).toFixed(2);
}

<input placeholder="$0.00" type="number" onchange="setDecimal" name="amount_20_20_amt" id="amount_20_20_amt" value="" autocomplete="off" min="0" max="50000000" step="0.01">

This doesn't work for some reason, although I was able to use the following inline solution and it works perfectly:

onchange="(function(el){el.value=parseFloat(el.value).toFixed(2);})(this)"

I can't use jQuery or any other libraries (business rules) and I need it to show when the input loses focus. Adjusting the step to ".01" or "any" does not accomplish this.

The JS is stored in a .js file that is loading fine, and everything else in the .js file is working fine, so I think it must be an error in the snippet, although I can't figure out what.

Where am I going wrong?

Answer 1

You need to call the function in onchange . Currently, you're simply referencing it.

Change this:

onchange="setDecimal"

… to this:

onchange="setDecimal(this)"

this passes the input to the function.

Then change your function to this:

function setDecimal(input) {
  input.value = parseFloat(input.value).toFixed(2);
}

 function setDecimal(input) { input.value = parseFloat(input.value).toFixed(2); } 

 <input placeholder="$0.00" type="number" onchange="setDecimal(this)" name="amount_20_20_amt" id="amount_20_20_amt" value="" autocomplete="off" min="0" max="50000000" step="0.01"> 

Answer 2

Whenever you call a function, this is set based on how the function is called. If you call a function on an object (eg myObject.doTheThing() ), this will be that object while you're in the scope of that function. If this is called without an object, then this becomes the global object ( window ).

Your second example works because you are passing this so that it can be referenced as el . You can achieve the same effect by doing this:

function setDecimal(input) {
    input.value = parseFloat(input.value).toFixed(2);
}

<input placeholder="$0.00" type="number"
    onchange="setDecimal(this)" name="amount_20_20_amt" id="amount_20_20_amt"
    value="" autocomplete="off" min="0" max="50000000" step="0.01">

You might also consider using addEventListener to bind the event instead.

 document.querySelector('input').addEventListener('blur', function() { this.value = parseFloat(this.value).toFixed(2); }); 

 <input> 

EDIT: @RickHitchcock is also correct. I fixed the function parenthesis problem without even noticing. You will need to make sure you have parens and make sure the element can be referenced in the scope of the function.