<div class="container mt-2">
<div class="row">
<div class="col-10 p-2 bg-secondary rounded">
<div class="row mt-2"><div class="col-md-4">
<label>Ширина(мм.)</label>
<input type="number" class="form-control" placeholder="мм." name="width" value="" min="1">
</div>
<div class="col-md-4">
<label>Длина(мм.)</label>
<input type="number" class="form-control" placeholder="мм." name="length" value="" min="1">
</div>
<div class="col-md-4">
<label>Количество</label>
<input type="number" class="form-control" placeholder="Количество" name="count" value="1" min="1">
</div></div><div class="row">
<div class="col-md-8 mt-3">
<label>Примерная стоимость $</label>
<p class="form-control" name="result"><span id ="total" >0</span></p>
</div>
<div class="col-md-4 mt-3">
<label>Цена $ за мм<sup>2</sup></label>
<input type="number" class="form-control" placeholder="Количество" name="price" value="2" min="1">
</div>
</div>
<button onclick="clearInputs()" type="button" class="btn btn-sm btn-secondary"><svg width="16" height="16" viewBox="0 0 16 16">
<path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"></path>
</svg> Очистить </button>
</div>
</div></div>
:root{
--bs-secondary-rgb: 217,217,217;
}
button > svg{
width: 1em;
height: 1em;
display: inline-block;
vertical-align: -0.125em;
fill: currentcolor;
}
const total = document.getElementById('total'),
price = document.getElementById('price'),
inputs = [...document.querySelectorAll('input.form-control')],
clearInputs = () => { inputs.map((n,i) => n.value = n.name != 'price' ? 0 : n.value), total.innerText = 0;};
inputs.forEach(input => {
input.addEventListener('input', () => {
total.innerText = inputs.reduce((acc, input) => {
return acc * Number(input.value == '' ? 0 : input.value);
}, 1);
});
});