Как получить значение из input с тысячным разделителем?

Question

Ребята, как решить задачку - сразу пишу код :

function onCalc() {
        const val = +document.querySelector('#input-value').value;
        const out = document.querySelector('#out-value');
        out.innerHTML = 'Итого:'+ val * 5;
    }
    document.querySelector('#calc-btn').onclick = onCalc;

<input id="input-value" type="text">
<button id="calc-btn" class="btn">Calculate</button>

<div id="out-value">Итого:</div>

Задачка тривиальная, много о ней написано, но есть пару условий - 1) значения input & out должны показываться в тысячных (например: 1,000 или 1,345,678.678,9). 2) В input вводятся только цифры + , + .! Сразу пишу input type="number" не предлагать!) - не подходит. Могу сделать раздельно два условия, но вместе пока не могу соединить. Есть такой набросок кода:

document
        .querySelector('#input-value')
        .addEventListener('input', function (e) {
            this.value = this.value.replace(/[^\d.]/g, '');
            this.value = this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
        });

По нему: в input'e все ок, а в out прилетает NaN. В общем буду рад любой помощи.

Answer 1

function onCalc() {
  const input = document.querySelector('#input-value');
  const value = input.value;
  const number = parseFloat(value.replaceAll(',', ''));
  const out = document.querySelector('#out-value');
  out.innerHTML = 'Итого:' + number * 5;
}
document.querySelector('#calc-btn').onclick = onCalc;

document.querySelector('#input-value').addEventListener('input', function(e) {
  this.value = this.value.replace(/[^\d.]/g, '');
  this.value = this.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
});

<input id="input-value" type="text" />
<button id="calc-btn" class="btn">Calculate</button>

<div id="out-value" type="text" maxlength="12">Итого:</div>

БЛОГ НА HUSL

Как получить значение из input с тысячным разделителем?

Ответы (1 шт):