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

Здравствуйте, сообщество! Я пытаюсь использовать функцию 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 и т. д.), всегда одним и тем же способом.

Можно ли использовать эту функцию для всех цветов или мне придется писать эту функцию для каждого цвета, только с другим именем? Большое спасибо за ответ/пример

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

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

 


<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: Я полагаю, что вы просматриваете набор результатов базы данных для создания строк в форме, поэтому вы можете использовать их в своих интересах.