Question

已更新。

Sean Kaat在如何添加输入字段方面向我提供了正确的指导。但是，我仍然不确定如何在这三个范围之间建立数学关系。

<!DOCTYPE html>
<html lang='en' class=''>
<head>
<meta charset='UTF-8'>
</head>

<title>Calculator</title>
<h1>Calculator</h1>

<body>

<form>
<Label for="sliderBarOne">Ready</Label>
<input type="range" id="sliderBarOne" min="0" max="100" step="0.01" value="0" oninput="this.form.rangeOne.value=this.value">
<input type="number" id="rangeOne" oninput="this.form.sliderBarOne.value=this.value, updateSum();">
<br>
<Label for="sliderBarTwo">ACW</Label>
<input type="range" id="sliderBarTwo" min="0" max="100" step="0.01" value="0" oninput="this.form.rangeTwo.value=this.value">
<input type="number" id="rangeTwo" oninput="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" oninput="this.form.rangeThree.value=this.value">
<input type="number" id="rangeThree" oninput="this.form.sliderBarThree.value=this.value">
<br>Sum: <span id="sum">0</span>
</form>

<script>

document.getElementById("sliderBarOne").addEventListener("input", updateReady);
document.getElementById("sliderBarTwo").addEventListener("input", updateACW);
document.getElementById("sliderBarThree").addEventListener("input", updateExtra);

function updateReady() {
  let readyBox = document.getElementById('sliderBarOne').value;
  let ACWBox = document.getElementById('sliderBarTwo').value; 
  let extraBox = document.getElementById('sliderBarThree').value;

  updateSum();
}

function updateACW() {
  let readyBox = document.getElementById('sliderBarOne').value;
  let ACWBox = document.getElementById('sliderBarTwo').value; 
  let extraBox = document.getElementById('sliderBarThree').value; 

  updateSum();
}

function updateExtra() {
  let readyBox = document.getElementById('sliderBarOne').value;
  let ACWBox = document.getElementById('sliderBarTwo').value; 
  let extraBox = document.getElementById('sliderBarThree').value; 

  updateSum();
}

function updateSum() {
  var sliderOneValue = +document.getElementById('sliderBarOne').value;
  var sliderTwoValue = +document.getElementById('sliderBarTwo').value;
  var sliderThreeValue = +document.getElementById('sliderBarThree').value;
  document.getElementById('sum').innerHTML = sliderOneValue + sliderTwoValue + sliderThreeValue;
}

</script>
</body>
</html>

我想建立两个我不知道如何开始工作的数学关系。

我希望Ready成为第一个设置的数字，并且ACW设置为100-Ready。因此，如果有95 Ready，则ACW自动设置为5。我希望Extra设置为0才能启动。

Ready = 95.00
ACW = 5.00
Extra = 0.00

因此，为了演示额外时间对Ready和ACW的影响，我希望添加Extra来调整Ready和ACW，同时保持Ready和ACW =100。Ready + ACW + Extra不等于100。

因此，如果输入5.00，则会发生以下情况。

Ready = 90.00
ACW = 10.00
Extra = 5.00

塞恩·凯特（Sean Kaat）提出的建议目前对我不起作用，我也不知道为什么。我设置了updateReady，updateACW和updateExtra的空函数，以便可以使用它来处理三个单独的数学更改。

Answer 1

您是正确的，数学量将大幅增加；您要确保按特定顺序设置值。

首先：将READY设置为PREVIOUS_READY_VALUE - EXTRA（如果该值小于0，则将其设置为0），

然后：将ACW设置为100 - (EXTRA + READY)，

最后：将每个滑块的input.value设置为上述值

滑块的每个onChange事件都应该进行数学运算，然后相应地更改html的值。

Answer 2

塞恩·凯特（Sean Kaat）在大多数情况下帮助了我。我已经解决了主要问题。我在if语句问题上提出了第二个更集中的问题

HTML / Javascript仅3个范围滑块，总和为100，有2个独立的数学交互

2 个答案: