Есть ли способ, которым я могу соединить входы вместе?

Question

У меня есть 3 input поля, которые я хотел бы соединить / связать друг с другом.Я хочу, чтобы их общая стоимость была ограничена 100%.Таким образом, если 1 вход равен 40%, то у других 2 input остается 60%, чтобы распределить их значение.

Я пытаюсь найти свой ответ на Google, но я думаю, что я ищу по неправильным критериям.Кто-нибудь знает, как это сделать, или есть руководство, как это сделать?

<div class="form_groep">
  <label class="input_label_koolhydraten"><b>Koolhydraten</b></label>
  <input class="input_macro_koolhydraten" type="number" name="message" id="macro_koolhyrdaten" required><span>%</span>
</div>
<div class="form_groep">
  <label class="input_label_eiwitten"><b>Eiwitten</b></label>
  <input class="input_macro_eiwitten" type="number" name="message" id="macro_eiwitten" required><span>%</span>
</div>
<div class="form_groep">
  <label class="input_label_vetten"><b>Vetten</b></label>
  <input class="input_macro_vetten" type="number" name="message" id="macro_vetten" required><span>%</span><br><br>
</div>

Answer 1

Если я правильно понял, вы хотите иметь 3 входа, чтобы сумма его значений не превышала 100, верно?
Если да, то мой код ниже может вам помочь.Там вы получите все входные данные в массиве, а затем добавите прослушиватель для изменения каждого из них.Этот слушатель получит значение input, которое изменяется, и проверит, не превышает ли его значение, суммированное со значением других, 100.

Проверьте код, и если вы что-то не понялиРасскажите в комментариях.Кроме того, предупредите меня, если я вас неправильно понял.

let total = 0;
const ipts = Array.from(document.getElementsByTagName('input'));
const totalElem = document.getElementById("total")

for (var i = 0; i < ipts.length; i++){
  ipts[i].onchange = countTotal
}

function countTotal(){
  let value = parseFloat(this.value);
  total = ipts.reduce((counter,elem) => parseFloat(elem.value) + counter, 0);
  total -= value;
  if (value > 100){
    this.value = 100;
  }
  if (value + total > 100){
    this.value = 100 - total;
  }  
  totalElem.innerText = total + parseFloat(this.value);
}

<div class="form_groep">
  <label class="input_label_koolhydraten"><b>Koolhydraten</b></label>
  <input class="input_macro_koolhydraten" type="number" name="message" id="macro_koolhyrdaten" required value='0'><span>%</span>
</div>
<div class="form_groep">
  <label class="input_label_eiwitten"><b>Eiwitten</b></label>
  <input class="input_macro_eiwitten" type="number" name="message" id="macro_eiwitten" required value='0'><span>%</span>
</div>
<div class="form_groep">
  <label class="input_label_vetten"><b>Vetten</b></label>
  <input class="input_macro_vetten" type="number" name="message" id="macro_vetten" required value='0'><span>%</span><br><br>
</div>
<div><span id="total">0</span> out of 100% </div>

Answer 2

Вы можете прослушивать change или input события со всех этих входов в js, а затем получать значения от всех, считать их длины, а если sum_of_their_lengths > some_maximum_value, то блокировать их.