There are 2 forms that recalculate values ​​from one to another:
The first form counts the quantity of the product and in the second form shows the price for this product.
The second form when entering the price shows how much product you can buy in the 1st form

I want to make a function that will determine the id of the input tag in html (or something that could determine the difference between these forms), and depending on this, the function should choose which formula to use and where to get the value for the calculation, and what form to show the result ( 1st or 2nd).

Help reduce the code, because now you have to enter the same values ​​twice to recalculate the same.
Perhaps there is some other approach?

<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); }
  • Well, where is your code? put it in question - Alexey Shimansky
  • Corrected, you may just know some way to find out from which form input is entered using javascript, and after that it is already clear - wiaim

1 answer 1

First of all, in order not to clutter your ID input (all of a sudden you will need some other identifier for something else), you can use the data attribute to record arbitrary data. This may be an identifier and a name, and generally any additional information to the field. And then to work with these attributes.

Plus, in order to recognize an element in the function, it is enough to pass this element to it as a parameter.

  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>

Although I'm not sure that this is already done by someone (I'm talking about the assignment of functions directly in the elements). It seems that now addEventListener listeners are usually hung on the fields and are already dancing from the data that came from the listener.

Or determine the behavior of the elements, after selecting them, something like this:

 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>