Your code as posted shows quite a few typos, but the main reason it 'doesn't work' is that programatic changes to an input don't trigger a change event
. It will be far clearer to abstract your methods into its own script and then appropriately handle the changes and update the total.
Here is a minimal example of your logic abstracted into html and a separate script. The inputs have been changed to type="number"
to avoid entering non-numeric values. The script then queries the three inputs using getElementById
and attaches change
listeners to the two accepting input using addEventListener
. Finally there is a single function declared to update the value of the third input with the formatted value.
const number1 = document.getElementById('number1');
const number2 = document.getElementById('number2');
const summa = document.getElementById('summa');
function updateTotal() {
const total = Number(number1.value) + Number(number2.value);
summa.value = total.toLocaleString('sv-SE', {
style: 'currency',
currency: 'SEK',
currencyDisplay: 'symbol',
maximumFractionDigits: 0,
});
}
number1.addEventListener('change', updateTotal);
number2.addEventListener('change', updateTotal);
<h2>Calculator</h2>
<input type="number" id="number1" value="0"/>
<br />
<input type="number" id="number2" value="0" />
<br />
<input type="text" id="summa" readonly="true" value="0"/>
note: your method of coercing a string to number is valid, but there are more transparent methods. Here I'm using the Number constructor directly but there are plenty of other methods
If you somehow feel that you need to do this all inline you can apply the same logic, but you'll instantly note the amount of duplicated code.
<h2>Calculator</h2>
<input type="number" id="number1" value="0" onchange="summa.value = (Number(number1.value) + Number(number2.value)).toLocaleString('sv-SE', {
style: 'currency',
currency: 'SEK',
currencyDisplay: 'symbol',
maximumFractionDigits: 0,
});" />
<br />
<input type="number" id="number2" value="0" onchange="summa.value = (Number(number1.value) + Number(number2.value)).toLocaleString('sv-SE', {
style: 'currency',
currency: 'SEK',
currencyDisplay: 'symbol',
maximumFractionDigits: 0,
});" />
<br />
<input type="text" readonly="readonly" id="summa" value="0" />
Alternatively you can include an inline script as a decent compromise.
<h2>Calculator</h2>
<input type="number" id="number1" value="0" />
<br />
<input type="number" id="number2" value="0" />
<br />
<input type="text" id="summa" readonly="true" value="0" />
<script type="module">
const number1 = document.getElementById('number1');
const number2 = document.getElementById('number2');
const summa = document.getElementById('summa');
function updateTotal() {
const total = Number(number1.value) + Number(number2.value);
summa.value = total.toLocaleString('sv-SE', {
style: 'currency',
currency: 'SEK',
currencyDisplay: 'symbol',
maximumFractionDigits: 0,
});
}
number1.addEventListener('change', updateTotal);
number2.addEventListener('change', updateTotal);
</script>