Javascript toLocaleString onKeyUp Event

Question

I need some help to fix this issue, I'm trying to print out value from <input> tag while typing, and it should print out with thousand separator, but it return number like I input, more precisely it doesn't work. How I have to fix this...?

function cDes(e) {
  var k = e.currentTarget;
  var prc = k.value; //example value: 123456789
  var prc_f = prc.toLocaleString('de-DE');
  var oDiv = document.getElementById('cOut');
  if (e.keyCode == 13) {
    if (prc.length < 1) {
      oDiv.innerHTML = 'FREE';
    } else {
      oDiv.innerHTML = prc_f; //expected output value: 123.456.789
    }
  } else {
    oDiv.innerHTML = '...';
  }
}

<input type='number' id='price' onKeyUp='cDes(event)'>

<div id='cOut'></div>

Answer 1

Convert the input string to Number before using Number.toLocaleString():

var prc_f = Number(prc).toLocaleString('de-DE');

Example:

// get a reference to the element once
var oDiv = document.getElementById('cOut');

function cDes(e) {
  var prc = e.target.value; //example value: 123456789
  if (e.keyCode == 13) {
    if (prc.length < 1) {
      oDiv.innerHTML = 'FREE';
    } else {
      // you only need to convert the input when you display it
      oDiv.innerHTML = Number(prc).toLocaleString('de-DE'); //expected output value: 123.456.789
    }
  } else {
    oDiv.innerHTML = '...';
  }
}

<input type='number' id='price' onKeyUp='cDes(event)'>

<div id='cOut'></div>