我的迷你计算器不工作。 请阅读说明

Question

我正在尝试用 javascript 制作一个计算器，但它不起作用。 当我尝试这样做时，说 1 + 1 它给了我 11，这对于所有数字都是相同的，这是我的代码：

 var slider1 = document.getElementById("myRange1"); var slider2 = document.getElementById("myRange2"); var output = document.getElementById("output"); var fullEquat = document.getElementById("equation"); var add1 = slider1.value; var add2 = slider2.value; output.innerHTML = slider1.value; // Display the default slider value // Update the current slider value (each time you drag the slider handle) slider1.oninput = function() { output.innerHTML = this.value; } slider2.oninput = function() { add1 = slider1.value; add2 = slider2.value; equals = add1 + add2; fullEquat.innerHTML = slider1.value + "+" + slider2.value + "=" + equals; } slider1.oninput = function() { add1 = slider1.value; add2 = slider2.value; equals = add1 + add2; fullEquat.innerHTML = slider1.value + "+" + slider2.value + "=" + equals; }

 .slider { width: 400px; display: inline; } .equal { text-align: center; font-size: 100pt; margin: 0 0 0 0; }

 <div class="slidecontainer"> <input type="range" min="0" max="1000" value="500" class="slider" id="myRange1"> + <input type="range" min="0" max="1000" value="500" class="slider" id="myRange2"> </div> <p class="equal">=</p> <p id="output" class="output"></p> <p id="equation" class="equat"> + = </p>

Answer 1

当你声明add1 = slider1.value; add2 = slider2.value; add1 = slider1.value; add2 = slider2.value; 你得到的是一个字符串而不是一个数字……你应该像这样把它们放在一个 Number() 中

add1 = Number(slider1.value);
add2 = Number(slider2.value);

Answer 2

Value 属性返回一个字符串，您可以使用一个简单的技巧将其乘以 1，例如 add1 = slider。 value * 1. 它会给你一个数字

Answer 3

.value属性返回一个字符串
你必须使用.valueAsNumber来获取一个数字

示例代码：

 const calcForm = document.forms['form-calculation'] , pOutput = document.getElementById('p-output') ; calcForm.oninput=_=> { calcForm['range-1'].nextElementSibling.textContent = calcForm['range-1'].value calcForm['range-2'].nextElementSibling.textContent = calcForm['range-2'].value pOutput.textContent = calcForm['range-1'].valueAsNumber + calcForm['range-2'].valueAsNumber }

 form { width: 20em; } input[type="range"] {width: 80%; } label { font-size:2em; font-weight: bold; text-align: center; display: block; width: 80%;}

 <form name="form-calculation"> <input type="range" min="0" max="1000" value="500" name="range-1"><span>500</span> <label>+</label> <input type="range" min="0" max="1000" value="500" name="range-2"><span>500</span> <label>=</label> </form> <p id="p-output" class="output">1000</p>