Обновлено.
Шон Каат указал мне правильное направление добавления полей ввода.Тем не менее, я все еще не уверен, как сделать математические отношения между тремя диапазонами.
<!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-Готовы.Итак, если есть 95 Ready, ACW автоматически устанавливается на 5. Я хочу, чтобы Extra был установлен на 0 для запуска.
Ready = 95.00
ACW = 5.00
Extra = 0.00
Итак, чтобы продемонстрировать влияние Extra Time на Ready и ACW, я хочу, чтобы любое добавление Extra настраивало Ready и ACW, сохраняя Ready и ACW = 100. Ready + ACW + Extra делаетне равно 100.
Итак, следующее будет происходить при вводе Extra в 5.00.
Ready = 90.00
ACW = 10.00
Extra = 5.00
Шон Каат предложил что-то, что у меня сейчас не работает, и я незнаю, почему.У меня есть пустые функции updateReady, updateACW и updateExtra, так что я могу использовать их для обработки трех отдельных математических изменений.