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

Akm37

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

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

Hussywhisyvef

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

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

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

Похожие темы	Дата
[Артём Исламов] JavaScript для верстальщика	19.12.2024, 05:12
(свежак) Разработка Enterprise Angular.js Приложения	19.12.2024, 05:12
[дмитрий Лаврик] Jqueryui [2014]	19.12.2024, 05:12
[николас Закас] Javascript Для Профессиональных Веб-разработчиков	19.12.2024, 05:12
Javascript advanced	19.12.2024, 05:12
Налоги в зависимости от государства	19.12.2024, 05:12
Как открыть блок следующего/предыдущего шага с помощью JS-кода?	19.12.2024, 05:12
Я новичок в JS и мне нужна помощь!	19.12.2024, 05:12
jQuery AJAX + двоичный/blob – вернуть и показать изображения/другие файлы	19.12.2024, 05:12
Подборка книг по JavaScript (pdf-файлы)	19.12.2024, 05:12

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

Akm37

Hussywhisyvef

I AM

Интересно