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

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

Похожие темы	Дата
Игрушки на JavaScript	19.10.2024, 18:10
Javascript И Jquery. Исчерпывающее Руководство (3-е Издание)	19.10.2024, 18:10
[Loftschool] Основы JavaScript	19.10.2024, 18:10
Торjаvа Maven/ Spring/ Security/ Jpa(hibernate)/ Rest(jackson)/ Bootstrap(css)/ Jquery	19.10.2024, 18:10
Илья Кaнтop. Современный Учебник Javascript	19.10.2024, 18:10
Комбинированная часть другого скрипта не удалась при загрузке.	19.10.2024, 18:10
Практика и эффективность JavaScript	19.10.2024, 18:10
Ng-book 1.4: the complete book on angularjs	19.10.2024, 18:10
Книга jQuery Trickshots	19.10.2024, 18:10
Курс » Разработка интерфейсов » JavaScript или jQuery от Ильи Кантора	19.10.2024, 18:10

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

IlonaTitova

jastin375

I AM

Интересно