JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<form id="get-price">
	<hr>
	<label>
		Полы <input type="text" id="footage">м<sup>2</sup>
	</label>
	<hr>
	<p>
		Выберите уровень рабочего:
		<br>
	  <input type="radio" class="level" name="RadLevelWorking" value="1.3" checked> I
	  <input type="radio" class="level" name="RadLevelWorking" value="1"> II
	  <input type="radio" class="level" name="RadLevelWorking" value="0.7"> III
	</p>
	<p align="center">Основание пола:</p>
	<label>
		Стяжка (350 руб/м<sup>2</sup>)
		<input  type="checkbox" id="screed-coef" value="350">
	</label>
	<br>
	<br>
	<span id="result">Итого: 0 рубл.</span>
</form>

JavaScript

let opPrice = {
	form: document.getElementById(`get-price`),
	footage: document.getElementById(`footage`),
	screed: document.getElementById(`screed-coef`),
	result: document.getElementById(`result`),
	events: {
		input: e => {
			opPrice.result.textContent = `Итого: ${((+opPrice.footage.value|0) * (opPrice.screed.checked ? 350 : 1) * +opPrice.form.querySelector(`.level:checked`).value).toFixed(2)} рубл.`
		}
	}
};
opPrice.form.addEventListener(`input`, opPrice.events.input);