0

estoy tratando de tener 4 inputs de entrada de datos y 1 solo de salida, por ejemplo una calculadora, que dos inputs sean una suma y los otros 2 una multiplicacion, y el valor lo recibe un solo input. si los dos primeros inputs tienen valores, se ejecuta la suma, y si los ultimos dos inputs tienen valores, entonces se ejecuta la multiplicacion, les dejo el codigo.

si esto es muy rebuscado... podria alguien decirme como hacerlo de una manera mas optima? teniendo en cuenta que esto lo pongo de ejemplo para hacerlo como pregunta en la pagina pero la idea es hacerlo un poco mas grande, algo asi como 8 inputs de entrada y 4 de salida

var input1 = document.getElementById("uno");
var input2 = document.getElementById("dos");
var input3 = document.getElementById("tres");
var input4 = document.getElementById("cuatro");
var resultado = document.getElementById("resultado");
var prueba = document.getElementById("prueba");

var suma = function(a, b) {
  a = a || 0;
  b = b || 0;
  resultado.value = a + b;
}
var multiplicacion = function(a, b) {
  a = a || 0;
  b = b || 0;
  resultado.value = a * b;
}

prueba.addEventListener("click", function(e) {
  e.preventDefault();
  if (input1.value == 0 && input2.value == 0){
    multiplicacion(input3.valueAsNumber , input4.valueAsNumber);
 } else {
    suma (input1.valueAsNumber, input2.valueAsNumber)
 }
})
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <title>Calculadoras</title>
</head>

<body>
  <input type="number" id="uno" placeholder="uno">
  <input type="number" id="dos" placeholder="dos">
  <input type="number" id="tres" placeholder="tres">
  <input type="number" id="cuatro" placeholder="cuatro">
  <input type="number" id="resultado" placeholder="resultado">
  <input type="submit" value="calcular" id="prueba">
</body>

</html>

(ACTUALIZACION)

en el codigo de javascript me estaba faltando una parte importante que era el de tomar los valores y luego mostrarlos en el input de resultado, ahi lo actualizo. esta es la forma en la que estoy usando el codigo ahora mismo, ademas de un boton que limpie todos los campos, cual seria la manera mas optima de hacer las operaciones? el codigo verdadero es bastante mas largo

4 respuestas 4

0

Mmmm... Tu código de JavaScript está bien, pero te recomendaría JQuery, que es una librería más potente y con más funcionalidades. Podrías dividir a os input's en grupos, para después iterar cada uno, tu código con JQuery sería:

$('#prueba').click(function() {
    var suma = 0; var multiplicacion = 0;

    $('#suma input').each(function() {
        suma += $(this).val();
    });
    $('#mult').each(function() {
        multiplicacion *= $(this).val();
    });
    $('#resultado').append('Suma es: ' + suma + '<br/>');
    $('#resultado').append('Multiplicación: ' + multiplicacion);
});
3
  • 1
    lo de mas potente y con mas funcionalidades me parece relativo, pues finalmente el lenguaje en el que esta escrito JQuery es JavaScript
    – user75901
    el 16 ago. 2018 a las 4:36
  • ¿En qué sentido es más potente jQuery? ¿Qué funcionalidad tiene jQuery que no tiene JavaScript? el 16 ago. 2018 a las 6:17
  • Ciertamente JQuery al final es JS, pero lo más atractivo de esta librería es que simplifica mucho el código de JS, permite realizar animaciones más rápido que con JS y los códigos son más comprensibles. el 17 ago. 2018 a las 7:56
0

se me ocurre una manera mas facil de hacer lo que quieres, no se cuales sean tus intenciones pero se me hace mas facil colocando solo dos input y luego colocas botones para escoger la operancion es decir un boton para suma y otro para multiplicacion, te ahorrarias muchos input, a cada boton le asignas una funcion que lleve una variable a valer uno o dos de esta forma sabes cual boton fue precionado, con un simple if lo compruebas realizas la operacion y con una sentencia introduces el valor retornado al input resultado y te ahorrarias mucho codigo, ese codigo que posteaste esta muy enrredadado para lo que quieres hacer que es bastante facil, estoy del telefono pero tratare de colocar algo de codigo JS.

//declara las variables

var valor1 = document.getElementById('input1').value;  
var valor2 = document.getElementById('input2').value;  
var operacion = 0;
var resultado = 0;

//si vale 1 es suma si vale 2 es multiplicacion

if (operacion==1){
    resultado = valor1 + valor2;

    //con esta sentencia insertas el resultado en el input
    document.getElementById('inputRespuesta').value=    resultado;  
}

Suerte

0

Podrías simplificar poniendo un botón para suma y otro para multiplicar por medio de funciones con sólo dos inputs

HTML

<input id="primerValor" type="number">
<input id="segundoValor" type="number">

<input id="resultado" type="number">

<button onclick="sumar()">Sumar</button>
<button onclick="multiplicar()">Multiplicar</button>

para fines practicos podrías añadir la función directamente con onclick

JAVASCRIPT

var resultado = document.getElementByID("resultado");
function sumar() {
    var primerValor = document.getElementByID("primerValor");
    var segundoValor = document.getElementByID("segundoValor");
    resultado.value = primerValor.value + segundoValor.value;
}
function multiplicar() {
    var primerValor = document.getElementByID("primerValor");
    var segundoValor = document.getElementByID("segundoValor");
    resultado.value = primerValor.value * segundoValor.value;
}

Otra forma (y con mejores practicas) sería poner en los botones id y añadir un event listener para cada uno HTML

<input id="primerValor" type="number">
<input id="segundoValor" type="number">

<input id="resultado" type="number">

<button id="sumar">Sumar</button>
<button id="multiplicar">Multiplicar</button>

JAVASCRIPT

var resultado = document.getElementByID("resultado");
var sumar = document.getElementByID("sumar");
var multiplicar = document.getElementByID("multiplicar");

sumar.addEventListener("click",function () {
    var primerValor = document.getElementByID("primerValor");
    var segundoValor = document.getElementByID("segundoValor");
    resultado.value = primerValor.value + segundoValor.value;
},false);

multiplicar.addEventListener("click",function () {
    var primerValor = document.getElementByID("primerValor");
    var segundoValor = document.getElementByID("segundoValor");
    resultado.value = primerValor.value * segundoValor.value;
},false)
0

Yo también pienso que la forma en la que lo has intentado no es la más eficiente, de las opciones que te han dado las más acertadas me parecen las de Emiliano, pero hay un par de errores en su código que impedirían que te funcione correctamente, el primero es que al seleccionar los elementos en js por el id la d no tiene que estar en mayúsculas, y el segundo es que la suma no se hace correctamente porque js interpreta los elementos como strings y no como integer, tendrías que convertirlos con parseInt(), también te recomendaría hacerlo en la multiplicación para evitar posibles errores, tu código tendría que quedar así:

var resultado = document.getElementById("resultado");
function sumar() {
    var primerValor = document.getElementById("primerValor");
    var segundoValor = document.getElementById("segundoValor");
    resultado.value = parseInt(primerValor.value) + parseInt(segundoValor.value);
}
function multiplicar() {
    var primerValor = document.getElementById("primerValor");
    var segundoValor = document.getElementById("segundoValor");
    resultado.value = parseInt(primerValor.value) * parseInt(segundoValor.value);
}
<input id="primerValor" type="number">
<input id="segundoValor" type="number">

<input id="resultado" type="number">

<button onclick="sumar()">Sumar</button>
<button onclick="multiplicar()">Multiplicar</button>

De todas formas hay más métodos de conseguir lo que quieres, a mí este me parece correcto pero si quieres puedes probar otras formas.

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.