0

Есть 2 формы которые пересчитывают значения из одной в другую:
1ая форма считает кол-во продукта и во второй форме показывает цену, за этот продукт
2ая форма при вводе цены показывает, сколько продукта ты можешь купить в 1ой форме

Хочу сделать функцию которая будет определять id тэга input в html(или что либо, что могло бы определить различие этих форм), и в зависимости от этого функция должна выбирать какой формулой пользоваться и откуда брать значение для расчета, а в какую форму показывать результат(1ую или 2ую).

Помогите сократить код, ибо сейчас приходится дважды вводить одни и те же значения для пересчета одного и того же.
Возможно есть какой либо другой подход?

<input id="real" type="number" name="real" oninput="showValue();"> <input id="game" type="number" name="game" oninput="showValue();">

function showValue(price)
{
    id = '?';//Как найти id??
    if (id == 'game')
        document.getElementById("real").value = Math.floor(document.getElementById("game").value / price);
    else if (id == 'real')
        document.getElementById("game").value = Math.round(document.getElementById("real").value * price);
}
2
  • Ну а где же ваш код? поместите его в вопрос Commented 23 июл. 2016 в 12:44
  • Исправил, просто возможно вы знаете какой либо способ узнать из какой именно формы идет ввод с помощью javascript, а после уже понятно
    – wiaim
    Commented 23 июл. 2016 в 12:52

1 ответ 1

5

Во-первых, чтобы не захламлять айдишником инпут (вдруг он вам понадобиться для чего-то еще, какой-либо другой идентификатор), то можно воспользоваться атрибутом data для записи произвольных данных. Это может быть и идентификатор и имя и вообще любая дополнительная информация к полю. И далее уже работать именно с этими атрибутами.

Плюс, чтоб в функции распознать элемент, достаточно в нее передать этот самый элемент как параметр

 oninput="showValue(this);"

var price = 100;

function showValue(el) {  
  var id = el.dataset.id;
  var calcPrice = (id == 'game') ? Math.floor(el.value / price) : Math.floor(el.value * price)
  document.getElementById('form-' + id).innerText = calcPrice;      
}
<input type="number" name="real" data-id="real" oninput="showValue(this);">
<input type="number" name="game"  data-id="game" oninput="showValue(this);">

<div id="form-real">типа форма real</div>
<div id="form-game">типа форма game</div>

Хотя я не уверен что так уже кто-то делает (я про назначение функций непосредственно в элементах). Вроде бы сейчас обычно навешивают слушателей addEventListener на поля и уже танцуют от данных, пришедших со слушателя.

Или определяют поведение элементов, предварительно их выбрав, примерно так:

var price = 100;

var inputs = document.querySelectorAll("input.my-inputs");
for(var x = 0; x < inputs.length; x++) {  
  inputs[x].oninput = function() {
    var id = this.dataset.id;
    var calcPrice = (id == 'game') ? Math.floor(this.value / price) : Math.floor(this.value * price)
    document.getElementById('form-' + id).innerText = calcPrice;     
  };
}
<input type="number" name="real" data-id="real" class="my-inputs">
<input type="number" name="game"  data-id="game" class="my-inputs">

<div id="form-real">типа форма real</div>
<div id="form-game">типа форма game</div>

3

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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