计算器在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