Округление чисел является для вас пока второстепенным (и бессмысленным).В вашем случае используется правильная архитектура и хорошие практики, например, не использовать поля ввода для вычисляемого поля и не прикреплять обработчики событий из вашего HTML-кода: использование jQuery также было бы вполне уместно для подключения обработчиков.
У меня естьТакже выяснилось, что обработчик события «onchange» не дает ожидаемого результата, поэтому я изменил его на «onblur».Я не могу объяснить, почему, но я не буду углубляться в это, поскольку присоединение обработчиков из html определенно не рекомендуется.
Что касается шаблона разработки и отработки, попробуйте этот «бесшумный» фрагмент:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#commission {
width: 60px;
height: 20px;
border: 1px solid blue;
}
#finalPrice {
width: 60px;
height: 20px;
color: white;
background-color: blue;
}
</style>
</head>
<body>
How Much? <input type="text" onblur="output();" id="price">
<br>
Cloudwine comm.: <div id="commission"></div>
Price: <div id="finalPrice"></div>
<script>
function output ()
{
let priceValue = Number ($('#price').val()),
resultCommission = Number (priceValue *.25),
firstAddition = priceValue + resultCommission,
resultFinal = firstAddition + firstAddition *.125 ;
$('#commission').html (resultCommission);
$('#finalPrice').html (resultFinal);
}
</script>
</body>
</html>
Полагаю, вы обратились к этим полям ввода из-за форматирования.Не делайте этого, используйте CSS вместо этого (и особенно для правил 'float').
Кроме того, у меня есть приведенные значения explicity к Number: JS - очень слабый язык, вы можете получить странные результаты, если не платитевнимание.