My mini calculator isn't working. Please read description

Question

I am trying to make a calculator in javascript and it is not working. When I try to do, say 1 + 1 it gives me 11 and this is the same for all the numbers here is my code:

 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

When you declared add1 = slider1.value; add2 = slider2.value; add1 = slider1.value; add2 = slider2.value; you got a string instead of a number... you should put them inside a Number() like this

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

Answer 2

Value property returns you a string, you can use a simple trick to multiply it with 1 like add1 = slider. value * 1. and it will give you a number

Answer 3

.value property return a string
you have to use .valueAsNumber to get a number

sample code:

 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>