Добрый день, есть сайт, на нем реализовал калькулятор (с помощью тем данного форума). Все работает, все считает отлично
.
Возникла такая необходимость:
При нажатии на поле ввода цифр необходимо, что бы появлялись цифры и пользователь мог с помощью мышки "накликать" цифры в это поле. Как такое можно реализовать? С помощью чего, направьте на истинный путь
решения проблемы.
Код калькулятора:
<script type="text/javascript">
function check_digits(if_no_points) {
var key = event.keyCode;
if (!(key >= 48 && key <= 57) && key != 8 && key != 46) { event.returnValue = false; }
}
function calculate() {
var price = 0;
var min = document.getElementById('min');
var room_length = document.calc.room_length.value;
var room_width = document.calc.room_width.value;
var tubes_quantity = document.calc.tubes_quantity.value;
var lightpoints_quantity = document.calc.lightpoints_quantity.value;
var angles_quantity = document.calc.angles_quantity.value;
var svetilnik_quantity = document.calc.svetilnik_quantity.value;
var doroga = document.calc.doroga.value;
result_perimetr.innerHTML = document.calc.room_width.value * 40;
result_tubes.innerHTML = document.calc.tubes_quantity.value * 200;
result_lightpoints.innerHTML = document.calc.lightpoints_quantity.value * 300;
if (doroga >= 0 && doroga <= 20)
doroga_new = doroga * 0;
else doroga_new = doroga * 12;
result_doroga.innerHTML = doroga_new;
if (svetilnik_quantity >=0 && svetilnik_quantity <= 10)
svetilnik_new = svetilnik_quantity * 290;
else svetilnik_new = svetilnik_quantity * 250;
result_svetilnik.innerHTML = svetilnik_new;
if (room_length >=0 && room_length <= 14)
room_length_new = room_length * 290;
if (room_length >=15 && room_length <= 20)
room_length_new = room_length * 280;
if (room_length >=21 && room_length <= 40)
room_length_new = room_length * 260;
if (room_length >=41)
room_length_new = room_length * 240;
result_plochad.innerHTML = room_length_new;
price_new.innerHTML = room_length_new + svetilnik_new + doroga_new + document.calc.room_width.value * 40 + document.calc.tubes_quantity.value * 200 + document.calc.lightpoints_quantity.value * 300;
if (2900 >= price_new.innerHTML)
min.style.display = "";
else
min.style.display = "none";
if (0 >= price_new.innerHTML)
min.style.display = "none";
}
</script>
<h1>Расчет стоимости потолка</h1>
<table style="width: 100%">
<tr>
<td>
<form name="calc">
<table>
<tr>
<td width="40%">Площадь помещения, м:</td>
<td width="20%"><input size="5" name="room_length" onKeyPress="return KeyPress(event, 1);" onkeyup="calculate();" /></td>
<td width="20%"><span id="result_plochad">0</span> руб.</td>
</tr>
<tr>
<td>Периметр помещения, м (примерно равен площади):</td>
<td><input size="5" name="room_width" onKeyPress="return KeyPress(event, 2);" onkeyup="calculate();" value="" /></td>
<td><span id="result_perimetr">0</span> руб.</td>
</tr>
<tr>
<td>Кол-во труб:</td>
<td><input size="5" name="tubes_quantity" onKeyPress="return KeyPress(event, 3);" onkeyup="calculate();" value="" /></td><td><span id="result_tubes">0</span> руб.</td>
</tr>
<tr>
<td>Кол-во люстр:</td>
<td><input size="5" name="lightpoints_quantity" onKeyPress="return KeyPress(event, 4);" onkeyup="calculate();" value="" /></td><td><span id="result_lightpoints">0</span> руб.</td>
</tr>
<tr>
<td>Кол-во светильников:</td>
<td><input size="5" name="svetilnik_quantity" onKeyPress="return KeyPress(event, 5);" onkeyup="calculate();" value="" /></td><td><span id="result_svetilnik">0</span> руб.</td>
</tr>
<tr>
<td>За сколько км. от Кирова Вы находитесь (районом считается расстояние свыше 20 км. от города):</td>
<td><input size="5" name="doroga" onKeyPress="return KeyPress(event, 6);" onkeyup="calculate();" value="" /></td><td><span id="result_doroga">0</span> руб.</td>
</tr>
<tr style="display:none;">
<td>Кол-во углов в комнате:</td>
<td><input size="5" name="angles_quantity" onKeyPress="return KeyPress(event, 7);" onkeyup="calculate();" value="4" /></td>
</tr>
<tr style="display:none;">
<td>Площадь потолка:</td>
<td><span id="roof_size"></span> м<sup>2</sup></td>
</tr>
<tr style="display:none;">
<td>Периметр потолка:</td>
<td><span id="roof_perimeter"></span> м</td>
</tr>
<tr>
<td>ИТОГО:*</td>
<td></td>
<td><span id="price_new" >0</span> руб.</td>
</tr>
<tr id="min" style="display:none">
<td colspan="3">Минимальная сумма заказа составляет 2900 рублей.</td>
</tr>
</table>
</form>