計算器在JS中給出錯誤的結果

Question

我正在學習一些JavaScript，並且嘗試制作一個簡單的計算器。

這筆總算很好，但是其余的操作都沒用。 我做錯了什么？

JS：

function soma(){
    var s1 = parseInt(document.getElementById("valor1").value,10);
    var s2 = parseInt(document.getElementById("valor2").value,10);
    document.getElementById("resultado").style.display = "block";

    if(document.getElementById("btnSoma").onclick){
        var soma = s1 + s2;
        document.getElementById("resultado").innerHTML = soma;
    }else if(document.getElementById("btnSubtrair").onclick){
        var subtrair = s1 - s2;
        document.getElementById("resultado").innerHTML = subtrair;
    }else if(document.getElementById("btnMultiplicar").onclick){
        var mult = s1 * s2;
        document.getElementById("resultado").innerHTML = mult;
    }else if(document.getElementById("btnDividir").onclick){
        var div = s1 / s2;
        document.getElementById("resultado").innerHTML = div;
    }


}

JSFiddle鏈接： https ://jsfiddle.net/y7r1m4nx/具有HTML

此外，有人可以解釋一下為什么我必須在parseInt中放入-10嗎？ 我從Mozilla文檔中不太了解它。

Answer 1

您應該在哪里設置JavaScript

document.getElementById("btnSoma").click(function() {
  var add = s1 + s2;
  document.getElementById("resultado").innerHTML = add;
});

並根據需要重復進行多次，除法和減法運算。 使用此實現，您無需將soma（）作為onclick函數調用。

此外，javascript parseInt函數可以采用兩個參數，即要解析的值和radix ，這是您要處理數字的radix 。通常我們以10為底，但是某些程序可能使用不同的基數。

Answer 2

這是工作代碼：

 function soma(type){ var s1 = parseInt(document.getElementById("valor1").value,10); var s2 = parseInt(document.getElementById("valor2").value,10); document.getElementById("resultado").style.display = "block"; var result; if (type === '+') { result = s1 + s2; } else if (type === '-') { result = s1 - s2; } else if(type === '*'){ result = s1 * s2; }else if(type === '/'){ result = s1 / s2; } document.getElementById("resultado").innerHTML = result; } 

 <div class="container text-center"> <input name="Valor 1" id="valor1"> <input name="Valor 2" id="valor2"><br> <button type="submit" onclick="soma('+')" id="btnSoma">Somar</button><br> <button type="submit" onclick="soma('-')" id="btnSubtrair">Subtrair</button><br> <button type="submit" onclick="soma('/')" id="btnDividir">Dividir</button><br> <button type="submit" onclick="soma('*')" id="btnMultiplicar">Multiplicar</button><br> <p id="resultado">Resultado</p> </div> 

您無法查看該元素以查看單擊了哪個元素。

if(document.getElementById("btnSoma").onclick)

相反，您可以傳遞一些可用於確定操作的值。 在示例代碼中，我傳入一個參數來指示我要執行的操作：

加：'+'，Subract：'-'，乘以：'*'並除以：'/'

還有其他方法可以完成此操作，包括讓每個onclick調用不同的函數。

但這應該有所幫助。

Answer 3

好吧，您的if語句不正確。 實際上，您實際上只是在檢查檢索到的按鈕上是否定義了onClick 。

按照定義，您總是會在第一個if塊中結束，因此除了求和之外，您將永遠不會做其他事情。 它只是一個事件處理程序，用於指示您實際單擊該程序時將執行的操作，並將其轉發給soma()函數。

現在，我不會說您似乎在說的語言，因此，將這個問題設為英語會有所幫助，但是我認為“軀體”意味着總和？

如果是這樣，您可以將4個不同的功能作為起點，處理相同的輸入，但是執行不同的操作，例如

 // get the element once, the values you can just retrieve when needed const value1 = document.getElementById('value1'); const value2 = document.getElementById('value2'); const output = document.getElementById('result'); function getValuesFromInput() { return { a: parseInt( value1.value ), b: parseInt( value2.value ) }; } function setOutput( result ) { output.innerText = result; } function sum() { const { a, b } = getValuesFromInput(); setOutput( a + b ); } function subtract() { const { a, b } = getValuesFromInput(); setOutput( a - b ); } function multiply() { const { a, b } = getValuesFromInput(); setOutput( a * b ); } function divide() { const { a, b } = getValuesFromInput(); setOutput( a / b ); } 

 <input id="value1"> <input id="value2"><br> <button type="button" onclick="sum()">Sum</button><br> <button type="button" onclick="subtract()">Subtract</button><br> <button type="button" onclick="multiply()">Multiply</button><br> <button type="button" onclick="divide()">Divide</button><br> <span id="result"></span> 

這將是最容易轉換的版本。如今，人們真的不再使用html內部的onclick語法，因此，您現在寧願在javascript中附加一個事件，並在那里處理它，例如

 // get the element once, the values you can just retrieve when needed const value1 = document.getElementById('value1'); const value2 = document.getElementById('value2'); const output = document.getElementById('result'); document.getElementById('btnSum').addEventListener('click', sum); document.getElementById('btnSubtract').addEventListener('click', subtract); document.getElementById('btnDivide').addEventListener('click', divide); document.getElementById('btnMultiply').addEventListener('click', multiply); function getValuesFromInput() { return { a: parseInt( value1.value ), b: parseInt( value2.value ) }; } function setOutput( result ) { output.innerText = result; } function sum() { const { a, b } = getValuesFromInput(); setOutput( a + b ); } function subtract() { const { a, b } = getValuesFromInput(); setOutput( a - b ); } function multiply() { const { a, b } = getValuesFromInput(); setOutput( a * b ); } function divide() { const { a, b } = getValuesFromInput(); setOutput( a / b ); } 

 <input id="value1"> <input id="value2"><br> <button type="button" id="btnSum">Sum</button><br> <button type="button" id="btnSubtract">Subtract</button><br> <button type="button" id="btnMultiply">Multiply</button><br> <button type="button" id="btnDivide">Divide</button><br> <span id="result"></span> 

總的來說並不會帶來很多，但是您當然可以稍微更改html以允許處理所有運算符，並且最終會變得更有趣，因為您最終可以使用event參數

 const value1 = document.getElementById('value1'); const value2 = document.getElementById('value2'); const output = document.getElementById('result'); document.querySelectorAll('[data-operator]').forEach( btn => btn.addEventListener( 'click', calculate ) ); function calculate( eventSource ) { const operator = eventSource.target.getAttribute('data-operator'); if (!operator) { return; } // eval should be used carefully here, but it is just demonstrating what you could get to output .innerText = eval( `(${parseInt(value1.value)}) ${operator} (${parseInt(value2.value)})` ); } 

 <input id="value1"> <input id="value2"><br> <button type="button" data-operator="+">Sum</button><br> <button type="button" data-operator="-">Subtract</button><br> <button type="button" data-operator="*">Multiply</button><br> <button type="button" data-operator="/">Divide</button><br> <span id="result"></span> 

現在，對於parseInt，第二個參數將是基數，例如

 console.log( parseInt( '11', 2 ) ); // input is in binairy format console.log( parseInt( '11', 10 ) );// input is in decimal format console.log( parseInt( '11', 16 ) );// input is in hexadecimal format