0

quiero multimplicar el valor de dos inputs y con un boton que desarroller la operancion por ejemplo en un input 2 y en otro 9 tambien como le puedo hacer para despues tambien se puedan sumar restar y dividir con otros inputs

<html>
  <head>

  </head>

  <body>
      <input id="1" type="text">
      <input id="2" type="text">
      <input  class="buton" type="button" id="boton_calc" value="Costo">
      <h1 id="esuma">COSTO</h1>

  </body>

    var m1 = getElementById("1");
    var m2 = getElementById("2");
        <script>
    var boton_de_calcular = document.getElementById("boton_calc");
    boton_de_calcular.addEventListener("click", res);

    function res() {
        var multi = m1 * m2;
        document.getElementById("esuma").innerHTML=multi;
    }
    </script>

    </body>
</html>

2 respuestas 2

1

Tienes algunos errores.

  1. Las variables m1 y m2 están fuera de la etiqueta <script>.
  2. Al declarar las variables m1 y m2 te falta la palabra reservada document antes de getElementById.
  3. Cuando vas a realizar la multiplicación, te falta acceder al valor que contiene el campo, en este caso seria m1.value y m2.value.

<html>
  <head>

  </head>

  <body>
      <input id="1" type="text">
      <input id="2" type="text">
      <input  class="buton" type="button" id="boton_calc" value="Costo">
      <h1 id="esuma">COSTO</h1>

  </body>

    
  <script>
    var m1 = document.getElementById("1");
    var m2 = document.getElementById("2");
    var boton_de_calcular = document.getElementById("boton_calc");
    boton_de_calcular.addEventListener("click", res);

    function res() {
        var multi = m1.value * m2.value;
        document.getElementById("esuma").innerHTML=multi;
    }
  </script>

  </body>
</html>

0

Esta sería una de las cientos de formas de hacerlo:

function calc() {
  var a = document.getElementById("a").value;
  var b = document.getElementById("b").value;
  
  var select = document.getElementById("select");
  var option = select.options[select.selectedIndex].text;
  
  var result = document.getElementById("result");
  
  if (option == "+") {
    result.value = parseInt(a) + parseInt(b);
  } else if (option == "-") {
    result.value = parseInt(a) - parseInt(b);
  } else if (option == "*") {
    result.value = parseInt(a) * parseInt(b);
  } else if (option == "/") {
    result.value = parseInt(a) / parseInt(b);
  }
}
form {
  background-color: #0a84ff;
  border-radius: 3px;
  display: flex;
  flex-flow: row wrap;
  padding: 1em
}

input, select {
  margin-bottom: 1em;
  width: 100%
}

input {
  border: 0;
  border-radius: 3px;
  padding: 1em
}

output {
  align-items: center;
  background-color: #fff;
  border-radius: 3px;
  display: flex;
  font-family: monospace;
  height: 5em;
  justify-content: center;
  width: 100%
}
<form oninput="calc()">
  <input id="a" type="number" value="0">
  <select id="select">
    <option>+</option>
    <option>-</option>
    <option>*</option>
    <option>/</option>
  </select>
  <input id="b" type="number" value="0">
  <output id="result"></output>
</form>

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.