我的迷你計算器不工作。 請閱讀說明

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>