Esempio.

codice:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        <input type="number" step="any" min="0" max="99" name="price1" value="1.00">
        <input type="number" step="any" min="0" max="99" name="price2" value="2.00">
        <input type="number" step="any" min="0" max="99" name="price3" value="3.00">
        <input type="number" step="any" min="0" max="99" name="price4" value="4.00">
        <button id="calc" type="calc">Calc</button>
    </form>
    <div id="tot"></div>

    <script src="test.js"></script>
</body>
</html>
codice:
const numbers = document.querySelectorAll('input[type=number]')
const calc = document.getElementById('calc')
const tot = document.getElementById('tot')

calc.addEventListener('click', e => {
    e.preventDefault()
    calcolaSpesa()
})

function calcolaSpesa() {
    const numbersArr = [...numbers].map(e => {
        return parseFloat(e.value)
    }).reduce((acc, value) => {
        return acc + value
    }).toFixed(2)
    tot.textContent = numbersArr
}