4 inputs and 1 single output

0

I am trying to have 4 inputs of data input and 1 single output, for example a calculator, that two inputs are a sum and the other 2 a multiplication, and the value is received by a single input. if the first two inputs have values, the sum is executed, and if the last two inputs have values, then multiplication is executed, I leave the code.

If this is very elaborate ... could someone tell me how to do it in a more optimal way? taking into account that I put this as an example to do it as a question on the page but the idea is to make it a little bigger, something like 8 input inputs and 4 output

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>

(UPDATE)

in the javascript code I was missing an important part that was to take the values and then display them in the result input, then update it. This is the way I am using the code right now, in addition to a button that cleans all the fields, what would be the most optimal way to do the operations? the true code is much longer

    
asked by Lucho K 16.08.2018 в 05:40
source

4 answers

0

Mmmm ... Your JavaScript code is fine, but I would recommend JQuery, which is a more powerful library with more features. You could divide the input's into groups, and then iterate each one, your code with JQuery would be:

$('#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);
});
    
answered by 16.08.2018 в 06:27
0

I can think of an easier way to do what you want, I do not know what your intentions are, but it makes it easier for me by placing only two input and then you put buttons to choose the operation, that is, a button for addition and another for multiplication , you would save many input, to each button you assign a function that carries a variable to be worth one or two in this way you know which button was clicked, with a simple if you verify it you perform the operation and with a sentence you enter the value returned to the input result and you would save much code, that code you posted is very entangled for what you want to do that is quite easy, I'm on the phone but I will try to put some code 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;  
}

Luck

    
answered by 16.08.2018 в 06:33
0

You could simplify putting a button for addition and another to multiply by means of functions with only two 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>

for practical purposes you could add the function directly with 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;
}

Another way (and with best practices) would be to put the id buttons and add an event listener for each one 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)
    
answered by 16.08.2018 в 08:21
0

I also think that the way you have tried is not the most efficient, the options that have given you the most successful seem to me those of Emiliano, but there are a couple of errors in your code that would prevent you from work correctly, the first is that when selecting the elements in js by the id the d does not have to be in uppercase, and the second is that the sum is not done correctly because js interprets the elements as strings and not as integer , you would have to convert them with parseInt (), I would also recommend doing it in multiplication to avoid possible errors, your code should be like this:

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>

Anyway there are more methods of getting what you want, to me this seems right but if you want you can try other ways.

    
answered by 19.08.2018 в 14:12