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

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; 时，您得到的是一个字符串而不是一个数字...您应该像这样将它们放在 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>