1

Использую две разные формы на одной странице. Для каждой формы должна работать своя функция умножения.

let arg = document.querySelector('input[name="argument"]');
let res = document.querySelector('input[name="result"]');
let cur = document.querySelector('select');
let arr = [arg, cur];

let calc = () => res.value = arg.value * cur.value;
arr.forEach(function(el){
	el.addEventListener('input', calc);
});
calc();

let arg2 = document.querySelector('input[name="argument2"]');
let res2 = document.querySelector('input[name="result2"]');
let cur2 = document.querySelector('select');
let arr2 = [arg2, cur2];

let cal2 = () => res2.value = arg2.value * cur2.value;
arr.forEach(function(el){
	el.addEventListener('input', calc);
});
calc();
<input type="number" name="argument" value="2"/>
<input type="text" name="result"/>
<select name="currency">
  <option value="1">1</option>
  <option value="2" selected>2</option>
  <option value="3" >3</option>
</select>

<input type="number" name="argument2" value="2"/>
<input type="text" name="result2"/>
<select name="currency2">
  <option value="1">1</option>
  <option value="2" selected>2</option>
  <option value="3" >3</option>
</select>

В первой форме все работает корректно, но я не могу создать такую же функцию для второй формы на одной странице из-за недостаточного знания синтаксиса.

Как корректно указать функцию умножения для второй формы?

1
  • 1
    указанные инпуты и селекты лежат в разных формах? добавь разметку с формами
    – Grundy
    30 мая 2017 в 11:05

1 ответ 1

2

Во-первых у вас select один на всех:

 let cur = document.querySelector('select');

добавьте ему уникальный id, например, ну или как вы уже делали name.

 let cur2 = document.querySelector('select[name="currency2"]');

Конечно, все рекомендуют использовать id:

let cur2 = document.querySelector('select#myId');

Во-вторых вы переименовали calc и arr в cal2 и arr2, но не везде, поэтому возникла путаница.

 arr2.forEach(function(el){

и

 let cal2 =...

let arg = document.querySelector('input[name="argument"]');
let res = document.querySelector('input[name="result"]');
let cur = document.querySelector('select[name="currency"]');
let arr = [arg, cur];

let calc = () => res.value = arg.value * cur.value;
arr.forEach(function(el){
	el.addEventListener('input', calc);
});
calc();

let arg2 = document.querySelector('input[name="argument2"]');
let res2 = document.querySelector('input[name="result2"]');
let cur2 = document.querySelector('select[name="currency2"]');
let arr2 = [arg2, cur2];

let cal2 = () => res2.value = arg2.value * cur2.value;
arr2.forEach(function(el){
	el.addEventListener('input', cal2);
});
cal2();
<input type="number" name="argument" value="2"/>
<input type="text" name="result"/>
<select name="currency">
  <option value="1">1</option>
  <option value="2" selected>2</option>
  <option value="3" >3</option>
</select>

<input type="number" name="argument2" value="2"/>
<input type="text" name="result2"/>
<select name="currency2">
  <option value="1">1</option>
  <option value="2" selected>2</option>
  <option value="3" >3</option>
</select>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.