0

Necesito imprimir los tres resultados al mismo tiempo, pero en el momento de seleccionar los 3 checkboxes solo me muestra un resultado, que es el primer if.

Ya validé y no sigue hacia los demás if. Anteriormente lo había intentado usando una sola variable resultado pero me presentaba el mismo problema.

    <script type="text/javascript">

    function calcular() {
        var res1, res2, res3, num1, num2;

        num1 = parseInt(document.getElementById('numero1').value);
        num2 = parseInt(document.getElementById('numero2').value);
        //alert('Numero 1: ' + num1);
        //alert('Numero 2: ' + num2);

        if (document.getElementById('checkbox1').checked) {
            res1 = num1 + num2;
            document.write(res1);
        }

        if (document.getElementById('checkbox2').checked) {
            res2 = num1 - num2;
            document.write(res2);
        }

        if (document.getElementById('checkbox3').checked) {
            res3= num1 * num2;
            document.write(res3);
        }
    }


</script>
<form>
    Numero 1: 
    <input type="text" name="nombre" id="numero1"><br><br>
    Numero 2: 
    <input type="text" name="nombre" id="numero2"><br><br>

    Suma <input type="checkbox" id="checkbox1">
    Resta <input type="checkbox" id="checkbox2">
    Multiplicación <input type="checkbox" id="checkbox3">
    <br>
    <br>

    <input type="button" name="submit" value="Realizar operación" onClick="calcular()">
    <input type="reset" value="borrar">

</form>
4
  • y si pruebas mejor pintarlo dentro de un elemento html ? digamos un div
    – mariovzc
    el 13 abr. 2019 a las 3:06
  • imprimo los res en un div?
    – iSony
    el 13 abr. 2019 a las 3:10
  • osea se me ocurre como 3 contenedores cada uno que tenga adentro el valor de cada respuesta, ahora mismo estás borrando todos los elementos del DOM y no tiene como mucho sentido.
    – mariovzc
    el 13 abr. 2019 a las 3:11
  • DOM? . no entiendo
    – iSony
    el 13 abr. 2019 a las 3:18

2 respuestas 2

1

Que tal si lo agregas en el html así:

function calcular() {
  var res1, res2, res3, num1, num2;

  num1 = parseInt(document.getElementById('numero1').value);
  num2 = parseInt(document.getElementById('numero2').value);
  //alert('Numero 1: ' + num1);
  //alert('Numero 2: ' + num2);

  if (document.getElementById('checkbox1').checked) {
    res1 = num1 + num2;
    document.getElementById('resultado1').innerHTML = res1;
  }

  if (document.getElementById('checkbox2').checked) {
    res2 = num1 - num2;
    document.getElementById('resultado2').innerHTML = res2;
  }

  if (document.getElementById('checkbox3').checked) {
    res3 = num1 * num2;
    document.getElementById('resultado3').innerHTML = res3;

  }
}
<form>
  Numero 1:
  <input type="text" name="nombre" id="numero1"><br><br> Numero 2:
  <input type="text" name="nombre" id="numero2"><br><br> Suma <input type="checkbox" id="checkbox1"> Resta <input type="checkbox" id="checkbox2"> Multiplicación <input type="checkbox" id="checkbox3">
  <br>
  <br>


  <input type="button" name="submit" value="Realizar operación" onClick="calcular()">
  <input type="reset" value="borrar">

  <div id='resultado1'></div>
  <div id='resultado2'></div>
  <div id='resultado3'></div>

</form>

0

¡Sony, lo que esta pasando en tu código es que cuando un if cumple la condición inmediatamente muestra esa respuesta por eso es que cuando los seleccionas y muestras los resultados solo muestra la primera condición ya que el imprime cada ves que es verdadero.

Una forma simple de que muestre las 3 respuestas es colocando el document.write al final con los 3 valores algo asi document.write(res1,res2,res3) pero si alguno de estos valores es indefinido te va a mostrar undefined, otra manera pueden ser hacerlo con un array:

function calcular() {
        var num1, num2;
        var respuestas = [];
        num1 = parseInt(document.getElementById('numero1').value);
        num2 = parseInt(document.getElementById('numero2').value);
        //alert('Numero 1: ' + num1);
        //alert('Numero 2: ' + num2);

        if (document.getElementById('checkbox1').checked) {
            respuestas.push('Suma: ' + num1+num2)
        }

        if (document.getElementById('checkbox2').checked) {
            respuestas.push('Resta: ' + parseInt(num1-num2))
            
        }

        if (document.getElementById('checkbox3').checked) {
             respuestas.push('Multiplicacion: ' + num1*num2)
            
        }
        document.getElementById("res").innerHTML = respuestas;
    }
<form>
    Numero 1: 
    <input type="text" name="nombre" id="numero1"><br><br>
    Numero 2: 
    <input type="text" name="nombre" id="numero2"><br><br>

    Suma <input type="checkbox" id="checkbox1">
    Resta <input type="checkbox" id="checkbox2">
    Multiplicación <input type="checkbox" id="checkbox3">
    <br>
    <br>

    <input type="button" name="submit" value="Realizar operación" onClick="calcular()">
    <input type="reset" value="borrar">

</form>
<br>
<label>Operaciones basicas</label>
<div id="res"></div>

Espero te sea de ayuda.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.