Как исправить "If заявление" от добавления переменных в геометрической прогрессии?

Question

Я пытаюсь использовать набор ползунков диапазона, чтобы воздействовать друг на друга различными способами.Мой Если оператор работает правильно при первом изменении значения, но при втором изменении значения он добавляет все значение вместо изменения.

Я пробовал все, что знаю, до сих пор, как решить эту проблему, но перерывы и продолжение, похоже, не решают проблему.

<form>
<Label for="sliderBarOne">Ready</Label>
<input type="range" id="sliderBarOne" min="0" max="100" step="0.01" value="0" onchange="this.form.rangeOne.value=this.value">
<input type="number" id="rangeOne" value="0" onchange="this.form.sliderBarOne.value=this.value">
<br>
<Label for="sliderBarTwo">ACW</Label>
<input type="range" id="sliderBarTwo" min="0" max="100" step="0.01" value="0" onchange="this.form.rangeTwo.value=this.value">
<input type="number" id="rangeTwo" value="0" onchange="this.form.sliderBarTwo.value=this.value">
<br>
<Label for="sliderBarThree">Extra</Label>
<input type="range" id="sliderBarThree" min="0" max="100" step="0.01" value="0" onchange="this.form.rangeThree.value=this.value">
<input type="number" id="rangeThree" value="0" onchange="this.form.sliderBarThree.value=this.value">
<br>Sum: <span id="sum">0</span>
</form>

<script>

document.getElementById("sliderBarOne").addEventListener("change", updateReady);
document.getElementById("sliderBarTwo").addEventListener("change", updateACW);
document.getElementById("sliderBarThree").addEventListener("change", updateExtra);
document.getElementById("rangeOne").addEventListener("change", updateReady);
document.getElementById("rangeTwo").addEventListener("change", updateACW);
document.getElementById("rangeThree").addEventListener("change", updateExtra);

function updateReady() {
  var readyBox = document.getElementById('sliderBarOne');
  var acwBox = document.getElementById('sliderBarTwo'); 
  var extraBox = document.getElementById('sliderBarThree');
  var readyField = document.getElementById('rangeOne');
  var acwField = document.getElementById('rangeTwo');
    if (readyBox.value < 100 || readyField.value < 100) {
      acwBox.value = 100 - parseFloat(readyBox.value);

      //Set Slider Values Into Fields
      readyField.value = readyBox.value;
      acwField.value = acwBox.value;
      extraField.value = extraBox.value;
    }
  updateSum();
}

function updateACW() {
  var readyBox = document.getElementById('sliderBarOne');
  var acwBox = document.getElementById('sliderBarTwo'); 
  var extraBox = document.getElementById('sliderBarThree');
  updateSum();
}

function updateExtra() {
  var readyBox = document.getElementById('sliderBarOne');
  var acwBox = document.getElementById('sliderBarTwo'); 
  var extraBox = document.getElementById('sliderBarThree');
  var readyField = document.getElementById('rangeOne');
  var acwField = document.getElementById('rangeTwo');
  var extraField = document.getElementById('rangeThree');
    if (extraBox.value > 0 || extraField.value > 0) {
      readyBox.value = parseFloat(readyBox.value) - parseFloat(extraBox.value);
      acwBox.value = parseFloat(acwBox.value) + parseFloat(extraBox.value);
      //Set Slider Values Into Fields
      readyField.value = readyBox.value;
      acwField.value = acwBox.value;
      extraField.value = extraBox.value;
    }
  updateSum();
}
</script>

При первом вводе значения в Ready оно корректно вычитает это значение из 100, чтобы получить ACW.

Затем, когда я помещаю значение в Extra, оно точно вычитает это значение из Ready и добавляет к ACW.Например, Ready 95, ACW 5. Создание Extra 1 делает Ready 94 и ACW 6. Проблема заключается в том, что когда я меняю Extra на 2, он делает Ready 92 и ACW 8 вместо Ready 93 и ACW 7.

Я не уверен, как получить изменение значения при каждом изменении.

Answer 1

ваша обновленная сумма () не определена, а ваше дополнительное поле не определено в функции updateready ()

Answer 2

OmG вдохновил на создание поля начального значения. Итак, я скорректировал код следующим образом. Спасибо OmG!

function updateExtra() {
  var readyBox = document.getElementById('sliderBarOne');
  var acwBox = document.getElementById('sliderBarTwo'); 
  var extraBox = document.getElementById('sliderBarThree');
  var readyField = document.getElementById('rangeOne');
  var acwField = document.getElementById('rangeTwo');
  var extraField = document.getElementById('rangeThree');
  var initialReady = document.getElementById('initialReady');
  var initialACW = document.getElementById('initialACW');
    if (extraBox.value > 0 || extraField.value > 0) {
      readyBox.value = parseFloat(initialReady.value) - parseFloat(extraBox.value);
      acwBox.value = parseFloat(initialACW.value) + parseFloat(extraBox.value);
      //Set Slider Values Into Fields
      readyField.value = readyBox.value;
      acwField.value = acwBox.value;
      extraField.value = extraBox.value;
    }
  updateSum();
}

Answer 3

Потому что значения были изменены ранее. Вы сначала измените их на 1, а затем измените их на 2. Следовательно, это означает, что дополнительное 3! Если вы не перезагрузите страницу, чтобы повторно инициализировать значения в 95 и 6, а затем применить дополнительные 2. Это даст вам 93 и 7.

Чтобы решить эту проблему, вы можете написать функцию initialize, которая инициализирует значения, а затем вызвать функцию в первой строке функции updateExtra.