Soy muy nuevo en la codificación, y he estado tratando de crear una calculadora muy simple utilizando HTML y JavaScript donde el usuario ingresa dos valores, selecciona un operador de una selección de botones, y luego obtiene un resultado.

¡Apreciaría alguna guía de personas que saben lo que están haciendo!

He intentado implementar de otra manera, pero no parece estar resolviendo el problema. Solo se está ejecutando la última línea de la función. Python no era tan difícil?

<button id="a" value="+">+</button>
<button id="b" value="-">-</button>
<button id="c" value="/">/</button>
<button id="d" value="X">X</button>

<input type="text" id="n1"/>
<input type="text" id="n2"/>
<script>
    function calc()
    {
        var n1 = parseFloat(document.getElementById('n1').value);
        var n2 = parseFloat(document.getElementById('n2').value);

        var a = document.getElementById("a").value;
        var b = document.getElementById("b").value;
        var c = document.getElementById("c").value;
        var d = document.getElementById("d").value;

        if(a === '+')
        {
            document.getElementById('result').value = n1+n2;
        }
        if(b === '-')
        {
            document.getElementById('result').value = n1-n2;
        }
        if(c === '/')
        {
            document.getElementById('result').value = n1/n2;
        }
        if(d === 'X')
        {
            document.getElementById('result').value = n1*n2;
        }
    }

</script>

Estoy esperando que cada línea sea ejecutada para producir el operando correcto, pero en la actualidad, la única última línea (N1 * N2) me está dando nada.

0
cantcodecowboy 29 jun. 2019 a las 00:25

1 respuesta

La mejor respuesta

Todas sus condiciones son ciertas, ya que el valor de un botón no cambia dependiendo de si el usuario hizo clic en él.

Debe cambiar calc() para que tome el botón como un parámetro, luego verifica el valor del valor del parámetro. Una declaración switch es una forma fácil de escribir este tipo de cheque.

function calc(button) {
  var n1 = parseFloat(document.getElementById('n1').value);
  var n2 = parseFloat(document.getElementById('n2').value);
  let result;
  switch (button.value) {
    case '+':
      result = n1 + n2;
      break;
    case '-':
      result = n1 - n2;
      break;
    case '/':
      result = n1 / n2;
      break;
    case 'X':
      result = n1 * n2;
      break;
  }
  document.getElementById('result').value = result;
}
<input type="text" id="n1" />
<input type="text" id="n2" /><br>
<button id="a" value="+" onclick="calc(this)">+</button>
<button id="b" value="-" onclick="calc(this)">-</button>
<button id="c" value="/" onclick="calc(this)">/</button>
<button id="d" value="X" onclick="calc(this)">X</button>
<br>
<input type="text" id="result" readonly />
0
Barmar 28 jun. 2019 a las 21:47