Использование функции дважды

[IlonaTitova]

Здравствуйте, сообщество! Я пытаюсь использовать функцию js в веб-форме для расчета цен на некоторые цвета.

<label for="wert1">How many litre colour RAL 451?</label><input type="text" name="wert1" id="wert1" onkeyup="form_ral451();"><br>
<label for="wert2">Euro / litre</label><input type="text" name="wert2" id="wert2" value="20" onkeyup="form_ral451();"><br>
<br>
<label for="result1">Price:</label><input type="text" name="result1" id="result1" readonly><br>

Код (JavaScript): и HTML-код для вызова функции.

<script type="text/javascript"> <!-- function form_ral451() { var wert1 = Number(document.getElementById('wert1').value); var wert2 = Number(document.getElementById('wert2').value); var resultField1 = document.getElementById('result1'); var result1 = wert2*wert1; resultField1.value = result1; } --> </script>
HTML: Теперь нужно рассчитать еще несколько цветов (RAL 452, RAL 460 и т. д.), всегда одним и тем же способом. Можно ли использовать эту функцию для всех цветов или мне придется писать эту функцию для каждого цвета, только с другим именем? Большое спасибо за ответ/пример

 

[jastin375]

Привет, вы определенно сможете использовать эту функцию так часто, как захотите — это хорошая практика программирования.

Хитрость заключается в том, чтобы сделать поля ввода и вывода легко различимыми. Я приведу пример, но потерпите, если я не совсем правильно понял, этого должно быть достаточно для начала.

 <label for="paint451">How many litre colour RAL 451?</label><input type="text" name="paint[451]" id="paint451"><br> <label for="price451">Euro / litre</label><input type="text" name="price[451]" id="price451" value="20 "><br> <label for="result451">Price:</label><input type="text " name="result[451]" id="result451" readonly><br> <label for="paint452">How many litre colour RAL 452?</label><input type="text" name="paint[452]" id="paint452"><br> <label for="price452">Euro / litre</label><input type="text" name="price[451]" id="price452" value="20" readonly><br> <label for="result452">Price:</label><input type="text " name="result[452]" id="result452" readonly><br>
<script type="text/javascript">
function calculatePrice() { var paintId = this.id.substring(5); var price = document.getElementById('price' + paintId); var resultField = document.getElementById('result' + paintId); var result = this.value * price.value resultField.value = result;
}
document.getElementById("paint451").addEventListener("keyup", calculatePrice);
document.getElementById("paint452").addEventListener("keyup", calculatePrice);
</script>

HTML: Я полагаю, что вы просматриваете набор результатов базы данных для создания строк в форме, поэтому вы можете использовать их в своих интересах.