Javascript - Add a decimal point in an input

Question

I'm getting help with a script, but I need to edit it to work well.

I'm novice (level 0), in JS, and there are points that surpass me...

The original version of the script allows me to add values ​​of several inputs, but the problem is that it does not add the decimal point for the thousands (example: 2.500) and only shows 2500 (without point).

I must also keep the LocalStorage for the result of the sum, and here everything works badly for me.

I have a DEMO LIVE HERE

Can you guide me better to achieve implement the new part of the script...?

NOTE: The add is at the end of script.

Thanks in advance!

//---------------------------

SCRIPT:

let clicks = 0;
let clicksdos = 0;

const safeInt = (key) => {
  let value = parseInt(getValue(key));
  return (isNaN(value) || value < 0) ? 0 : value;
}

// This loads our clicks from the LocalStorage
const loadClicks = () => {
  clicks = safeInt('clicks');
  clicksdos = safeInt('clicksdos');
}

const loadHTML = () => {
  return getValue('html', '');
}

const loadFromStorage = () => {
  let html = loadHTML();
  if (html !== '') {
    loadClicks();
  }
  displayClicks();
  document.querySelector(".derecha").innerHTML = html;
}

// Display the clicks on the screen
const displayClicks = () => {
  clicks = (clicks === NaN) ? 0 : clicks;
  clicksdos = (clicksdos === NaN) ? 0 : clicksdos;
  document.querySelector('#clicks').innerHTML = clicks;
  document.querySelector('#clicksdos').innerHTML = clicksdos;
  // Hide / Show Result 
  let display = (clicks > 0) ? 'block' : 'none';
  document.querySelector('#cont-resultado').style.display = display;
}

const adjustClicks = (value) => {
  clicks += value;
  clicksdos += value;
  storeValue('clicks', clicks);
  storeValue('clicksdos', clicksdos);
  displayClicks();
}
const addClick = () => adjustClicks(1);
const removeClick = () => adjustClicks(-1);


// Manage localStorage
const storeValue = (key, value) => (localStorage) ? localStorage.setItem(key, value) : '';
const getValue = (key, defaultValue) => (localStorage) ? localStorage.getItem(key) : defaultValue;
const storeHTML = () => storeValue("html", document.getElementsByClassName("derecha")[0].innerHTML);

// Add a node to the Derecha
const addToDerecha = (nodeId) => {
  let node = document.querySelector(`#${nodeId}`);
  document.querySelector('.derecha').appendChild(node.cloneNode(true));
  storeHTML();
  displaySuma();
};

// Monitor ALL click events 
document.addEventListener('click', (event) => {
  let target = event.target;
  // Add
  if (target.matches('.comp-clone')) {
    addClick();
    addToDerecha(event.target.dataset.clone);
  }
  // Remove
  if (target.matches('.bbp')) {
    removeClick();
    getParent('.derecha', target).removeChild(target.parentNode);
    storeHTML();
    displaySuma();
  }
});

// This is just a helper function.
const getParent = (match, node) => (node.matches(match)) ? node : getParent(match, node.parentNode);

// New Script for sum inputs
const displaySuma = () => document.getElementById("total").value = suma();

const suma = function() {
  return Array.from(document.querySelectorAll(".derecha div .add-prod"))
    .reduce((a, v) => a + parseFloat(v.value), 0);
}

// Code to run when the document loads.
document.addEventListener('DOMContentLoaded', () => {
  if (localStorage) {
    loadFromStorage();
  }

  displaySuma();

// ========== Start - NEW - Add Decimal Point to input #total ==========

/*Reference to the inputs that have the add-prod class to then add each value of those inputs */
var toAdd = document.querySelectorAll('.add-prod');

/* Reference to the input of the total */
var ibxTotal=document.getElementById('total');

/* We create a subTotal variable initialized to 0 */
var subTotal = 0;

/*Here the inputs are traversed with add-prod, accumulating their values in subTotal*/
toAdd.forEach(function(item) {
  subTotal += parseInt(item.value);
});

 /* We create a variable with the cumulative value in subTotal formatted to the 'es-ES' style*/

var total = new Intl.NumberFormat('es-ES').format(subTotal);
console.log(total);

/* We put that value in the input of the total */
ibxTotal.value=total;

// ========== End - NEW - Add Decimal Point to input #total ==========

});

Answer 1

For total input, you must add toLocaleString to your displaySuma.

const displaySuma = () => document.getElementById("total").value = suma().toLocaleString( "es-ES" );