How can I connect two inputs?

Question

I need to connect the inputs like the gif below

I wrote this code but because it works based on an idea, I can only have three inputs (pricing-base-price, pricing-profit, pricing-set-price) and if I want to have three more inputs with the same class, there will be a problem. My site address: alomykar.ir/qw Codes used

function calculateProfit(val) {
  var baseCost = document.getElementById("baseCost").value;
  document.getElementById("Profit").value = (val - baseCost).toFixed(2);
}

<div class="prt-pricing-heading">
  <span class="pricing-heading">Your sale price:</span>
  <div class="pricing-field"><input id="SalePrice" class="pricing-set-price" type="number" value="24.00" onchange="calculateProfit(this.value);" oninput="calculateProfit(this.value)"></div>
</div>
<div class="prt-pricing-detial">
  <span class="pricing-heading">Product base Cost:</span>
  <div class="pricing-field"><input id="baseCost" class="pricing-base-price" type="number" value="10.00" disabled></div>
</div>
<div class="prt-pricing-detial">
  <span class="pricing-heading">Your profit:</span>
  <div class="pricing-field"><input id="Profit" class="pricing-profit" type="number" value="14.00" disabled></div>
</div>

Are you asking how to make this code work for multiple copies of these three inputs in the same page? — Rory McCrossan, Dec 16 '20 at 09:05
Do you want to change 6 inputs? What are the classes and ids of these? Attempt to create a function and put some jquery or javascript code in that function to change the values. Or, is that what calculateProfit is for? — jqueryHtmlCSS, Dec 16 '20 at 09:36

FZs · Accepted Answer · 2020-12-16T21:48:26.870

Use classes instead of IDs, and wrap the inputs in another element (.pricing-input). Then you can iterate over them and set event listeners for each element:

for (const elem of document.querySelectorAll('.pricing-input')) {
  const setPrice = elem.querySelector('.pricing-set-price')
  const basePrice = elem.querySelector('.pricing-base-price')
  const profit = elem.querySelector('.pricing-profit')
  setPrice.addEventListener('input', function calculateProfit() {
    profit.value = (setPrice.value - basePrice.value).toFixed(2);
  })
}

<div class="pricing-input">
  <div class="prt-pricing-heading">
    <span class="pricing-heading">Your sale price:</span>
    <div class="pricing-field"><input class="pricing-set-price" type="number" value="24.00"></div>
  </div>
  <div class="prt-pricing-detial">
    <span class="pricing-heading">Product base Cost:</span>
    <div class="pricing-field"><input class="pricing-base-price" type="number" value="10.00" disabled></div>
  </div>
  <div class="prt-pricing-detial">
    <span class="pricing-heading">Your profit:</span>
    <div class="pricing-field"><input class="pricing-profit" type="number" value="14.00" disabled></div>
  </div>
</div>
<hr>
<div class="pricing-input">
  <div class="prt-pricing-heading">
    <span class="pricing-heading">Your sale price:</span>
    <div class="pricing-field"><input class="pricing-set-price" type="number" value="24.00"></div>
  </div>
  <div class="prt-pricing-detial">
    <span class="pricing-heading">Product base Cost:</span>
    <div class="pricing-field"><input class="pricing-base-price" type="number" value="10.00" disabled></div>
  </div>
  <div class="prt-pricing-detial">
    <span class="pricing-heading">Your profit:</span>
    <div class="pricing-field"><input class="pricing-profit" type="number" value="14.00" disabled></div>
  </div>
</div>
<hr>
<div class="pricing-input">
  <div class="prt-pricing-heading">
    <span class="pricing-heading">Your sale price:</span>
    <div class="pricing-field"><input class="pricing-set-price" type="number" value="24.00"></div>
  </div>
  <div class="prt-pricing-detial">
    <span class="pricing-heading">Product base Cost:</span>
    <div class="pricing-field"><input class="pricing-base-price" type="number" value="10.00" disabled></div>
  </div>
  <div class="prt-pricing-detial">
    <span class="pricing-heading">Your profit:</span>
    <div class="pricing-field"><input class="pricing-profit" type="number" value="14.00" disabled></div>
  </div>
</div>

To calculate the default value immediately, just call the calculateProfit function:

for (const elem of document.querySelectorAll('.pricing-input')) {
  const setPrice = elem.querySelector('.pricing-set-price')
  const basePrice = elem.querySelector('.pricing-base-price')
  const profit = elem.querySelector('.pricing-profit')
  function calculateProfit() {
    profit.value = (setPrice.value - basePrice.value).toFixed(2);
  }
  calculateProfit()
  setPrice.addEventListener('input', calculateProfit)
}

<div class="pricing-input">
  <div class="prt-pricing-heading">
    <span class="pricing-heading">Your sale price:</span>
    <div class="pricing-field"><input class="pricing-set-price" type="number" value="24.00"></div>
  </div>
  <div class="prt-pricing-detial">
    <span class="pricing-heading">Product base Cost:</span>
    <div class="pricing-field"><input class="pricing-base-price" type="number" value="10.00" disabled></div>
  </div>
  <div class="prt-pricing-detial">
    <span class="pricing-heading">Your profit:</span>
    <div class="pricing-field"><input class="pricing-profit" type="number" disabled></div>
  </div>
</div>
<hr>
<div class="pricing-input">
  <div class="prt-pricing-heading">
    <span class="pricing-heading">Your sale price:</span>
    <div class="pricing-field"><input class="pricing-set-price" type="number" value="24.00"></div>
  </div>
  <div class="prt-pricing-detial">
    <span class="pricing-heading">Product base Cost:</span>
    <div class="pricing-field"><input class="pricing-base-price" type="number" value="10.00" disabled></div>
  </div>
  <div class="prt-pricing-detial">
    <span class="pricing-heading">Your profit:</span>
    <div class="pricing-field"><input class="pricing-profit" type="number" disabled></div>
  </div>
</div>
<hr>
<div class="pricing-input">
  <div class="prt-pricing-heading">
    <span class="pricing-heading">Your sale price:</span>
    <div class="pricing-field"><input class="pricing-set-price" type="number" value="24.00"></div>
  </div>
  <div class="prt-pricing-detial">
    <span class="pricing-heading">Product base Cost:</span>
    <div class="pricing-field"><input class="pricing-base-price" type="number" value="10.00" disabled></div>
  </div>
  <div class="prt-pricing-detial">
    <span class="pricing-heading">Your profit:</span>
    <div class="pricing-field"><input class="pricing-profit" type="number" disabled></div>
  </div>
</div>

For more info about some features used:

dont work , plase chack the this link :http://alomykar.ir/aaa/ — cdk, Dec 16 '20 at 10:19
@cdk Please see [this post](https://stackoverflow.com/a/36096571/8376184) on how to include the script on page load — FZs, Dec 16 '20 at 10:33
The problem was solved, but the amount of profit will not be calculated until the amount of input changes. Please see my page [link](http://alomykar.ir/qw) — cdk, Dec 16 '20 at 17:23
@cdk I've edited my post to include that. However, non-trivial follow-up questions should generally be asked as separate questions, by the means of how SO works. — FZs, Dec 16 '20 at 21:48

How can I connect two inputs?

1 Answers1