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>

我第一次在“就绪”中输入值时，它会正确地从100中减去该值以提供ACW。

然后，当我将一个值放入Extra时，它将准确地从Ready中减去该值并添加到ACW中。例如，Ready 95，ACW5。制作Extra 1可以使Ready 94和ACW 6成为问题。问题是，当我将Extra更改为2时，它将变成Ready 92和ACW 8，而不是Ready 93和ACW 7。

我不确定每次更改时如何获取值中的更改。

Answer 1

因为这些值之前已更改。您首先通过1进行更改，然后通过2进行更改。因此，这意味着多余的是3！除非您重新加载页面以将值重新初始化为95和6，然后再应用额外的2。它将为您提供93和7。

要解决该问题，您可以编写一个initialize函数来初始化值，然后在updateExtra函数的第一行调用该函数。

Answer 2

在updateready（）函数中未定义您的updatesum（）并且未定义您的域

Answer 3

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();
}

如何修复“ If语句”以免指数添加变量？

3 个答案: