计算器在JS中给出错误的结果

时间：2018-11-12 20:45:44

标签： javascript html

我正在学习一些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

另外，有人可以解释一下为什么我必须将10放在parseInt中吗？我从Mozilla文档中不太了解。

3 个答案:

答案 0 :(得分：1)

您应该在

上设置您的JavaScript。 
document.getElementById("btnSoma").click(function() {
  var add = s1 + s2;
  document.getElementById("resultado").innerHTML = add;
});

，并根据需要重复此操作以进行多次，div，减法运算。使用此实现，您无需将soma（）作为onclick函数调用。

此外，javascript parseInt函数可以采用两个参数，即要解析的值和radix，这是您要处理数字的基础。通常我们以10为底，但是有些程序可能使用不同的基础。

答案 1 :(得分：1)

这是工作代码：

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)

您可以传入一些值来确定操作。在示例代码中，我传入一个参数来指示我要执行的操作：

  

添加：'+'，子对象：'-'，相乘：'*'并除以：'/'

还有其他方法可以完成此操作，包括让每个onclick调用不同的函数。

但这应该有所帮助。

答案 2 :(得分：1)

好吧，您的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以允许所有运算符都被处理，并且它最终变得更加有趣，因为您最终可以使用事件参数< / p> 

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

相关问题
最新问题