2

Poseo el siguiente código:

function mostrarSumarcom()
{
       var nrdb1 = parseFloat(document.getElementsByName("comnume1")[0].value);
 	   var  nrdb2 = parseFloat(document.getElementsByName("comnume2")[0].value);
	   
	    var x = document.getElementById("s1")[0].value;
		
       if (x=="Suma")
		  {
			var sumrdb=nrdb1+nrdb2;
			document.getElementsByName("ImprimirResultadorcom")[0].value = sumrdb;
		  }
		
}
 <form action="" method="post" class="form">
            <input type="text" name="comnume1" placeholder="Ingrese primer numero" /><br />
            <input type="text" name="comnume2" placeholder="Ingrese segundo numero" /><br />
            
            Seleccione la operacion deseada:
              <br>
            
                 <select name="Operacion"> <br>   
             			<option value="Seleccione"> Seleccione </option>
               			<option value="Suma" id="s1"> Suma </option>
               			<option value="Resta" id="r1"> Resta </option>
               			<option value="Multi" id="m1"> Multiplicacion </option>
               			<option value="Division" id="d1"> Division </option>
               	
               		</select>
                                                        
             <br>la suma es<br />
            <input type="text" name="ImprimirResultadorcom">
            <input type="button" value="Resultado" onclick="mostrarSumarcom()">
            <br />
            <br />
    
</form>

Como obtener el valor del elemento seleccionado(dropdown-select).

Gracias de antemano..!!

4
  • Podrías añadir mas detalles a tu problema? Gracias. el 25 mar. 2019 a las 21:52
  • Saludos , agrega mas detalles para poder entender tu problema, y es mejor agregar el código para poder reproducir el problema y dar una posible solución. el 25 mar. 2019 a las 21:53
  • Si tengo un grupo select en html con las opciones suma , resta, al programar la funcion en javascript que al seleccionar suma, no suma , no pasa nada el 25 mar. 2019 a las 22:01
  • Hola, por favor si puedes editar tu pregunta para agregar el código en vez de imágenes. Saludos el 25 mar. 2019 a las 22:03

5 respuestas 5

4

Lo que deberías hacer es asignarle un id a tu elemento select

<select name="Operacion" id="opciones"> <br>   
    <option value="Seleccione"> Seleccione </option>
    <option value="Suma"> Suma </option>
    <option value="Resta"> Resta </option>
    <option value="Multi"> Multiplicacion </option>
    <option value="Division"> Division </option>
</select>

<script>
        function operacion() {
            var x = document.getElementById("opciones").value;

            if(x == 'Suma') {
                // Código
            }
            if(x == 'Resta') {
                // Código
            }
            if(x == 'Multi') {
                // Código
            }
            if(x == 'Division') {
                // Código
            }

        }
</script>

De esta forma obtendrás el valor de tu elemento seleccionado en tu elemento select. Te recomiendo hacerlo de esta forma pues siempre obtendrás el mismo valor de var x = document.getElementById("s1")[0].value; lo selecciones o no lo selecciones. Además tienes un problema en esta parte pues al ser un elemento con id solo te regresa un solo valor y no un array por tanto debes usarlo de esta forma var x = document.getElementById("s1").value;

Saludos, espero haberte ayudado.

3

supongo que esto es lo que quieres lograr

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Operaciones</title>
</head>
<body>
    <div>
        <input type="text" id="num1" name="num1" placeholder="Numero 1">
        <input type="text" id="num2" name="num2" placeholder="Numero 2">

        <select name="Operacion" id="opciones"> <br>   
            <option value="Seleccione"> Seleccione </option>
            <option value="Sum"> Suma </option>
            <option value="Res"> Resta </option>
            <option value="Mul"> Multiplicacion </option>
            <option value="Div"> Division </option>
        </select>

        <input type="button" value="Resultado" onclick="operaciones()">
    </div>

    <div>
        <input type="text" id="resultado" name="resultado" placeholder="Resultado">
    </div>

    <script src="operaciones.js"></script>

</body>
</html>

En tu JS.

function operaciones() 
{
    let opcion = document.getElementById("opciones").value;
    let num1=parseFloat(document.getElementById("num1").value);
    let num2=parseFloat(document.getElementById("num2").value);
    let resultado = document.getElementById("resultado");

    if(opcion == 'Sum') {
        resultado.value=num1+num2;
    }
    if(opcion == 'Res') {
        resultado.value=num1-num2;
    }
    if(opcion == 'Mul') {
        resultado.value=num1*num2;
    }
    if(opcion == 'Div') {
        resultado.value=num1/num2;
    }
}

Obtendrías lo siguiente

introducir la descripción de la imagen aquí

Si no es lo que buscas, vuelve a formular tu pregunta y con gusto te ayudo. Un saludo.

1
  • Si es eso, gracias. Ya me dio y me gusta esa forma tambien, la voy a implementar. el 25 mar. 2019 a las 23:05
0

Otra forma de hacerlo, usando switch case:

function calcular(operacion) {
  let operando1 = parseFloat(document.getElementById('operando1').value);
  let operando2 = parseFloat(document.getElementById('operando2').value);
  let resultado;
  switch(operacion) {
    case 'sumar':
      resultado = operando1 + operando2;
      break;
    case 'restar':
      resultado = operando1 - operando2;
      break;
    case 'multiplicar':
      resultado = operando1 * operando2;
      break;
    case 'dividir':
      resultado = operando1 / operando2;
      break;
    default:
      resultado = null;
  }
  return resultado;
}
let button = document.getElementById('calcular');
button.addEventListener('click', (e) => {
  e.preventDefault();
  let operacion =  document.getElementById('operacion').value;
  document.getElementById('resultado').innerHTML = calcular(operacion);
});
<form>
    <input type="text" placeholder="Primer operando" id="operando1">
    <br>
    <input type="text" placeholder="Segundo operando" id="operando2">
    <br>
    <br>
    <div>
      Seleccione la operación deseada:
    </div>
    <br>
    <select name="Operacion" id="operacion">
      <option value="null">Seleccione:</option>
      <option value="sumar">Sumar</option>
      <option value="restar">Restar</option>
      <option value="multiplicar">Multiplicar</option>
      <option value="dividir">Dividir</option>
    </select>
    <br>
    <button type="button" name="button" id="calcular">Calcular</button>
    <br>
    <br>
    <div>Resultado:</div>
    <br>
    <div id="resultado"></div>
</form>

Ya tienes varias respuestas con diferentes opciones, aunque todas apuntan a lo mismo.

0

También puedes hacerlo con eval(), y en cada operador del formulario le das su valor de suma(+), resta(-), multiplicación(*) o división(/).

<script>

    // FUNCIÓN ENVIAR
    function enviar() {
        // 1. variables en las que recogemos el valor de los inputs
            // operador = en el que el valor puede ser '+, -, * o /' de la combo. Los hacemos coincidir con operadores de suma, resta...
            var operador = document.getElementById('operador').value;
            // el primer número, lo recogemos por 'id'
            var num1 = parseFloat(document.getElementById('num1').value);
            var num2 = parseFloat(document.getElementById('num2').value);

        // si el valor de 'operador' es '0', es que no hemos seleccionado la operación
        if(operador=="0") {
            // avisaremos al usuario
            alert('Selecciona una operación de la lista')
            // paramos
            return;
        }

        // realizamos el cálculo usando eval(), forzará la operación del 'num1' '+' 'num2' = resultado
        var resultado = eval(num1+operador+num2);
        // mostrar el valor en el input
        document.getElementById('total').value = resultado
    }

</script>

Formulario con los values de cada operador:

        <form>
            <input type="number" id="num1" placeholder="Ingrese primer número"><br>
            <input type="number" id="num2" placeholder="Ingrese segundo número"><br>
            Seleccione la operación deseada: <br>
            <select name="operador" id="operador">
                <!-- a cada operador le damos su valor de operación -->
                <option value="0" disabled selected>Seleccione</option>
                <option value="+" id="sum">Suma</option>
                <option value="-" id="res">Resta</option>
                <option value="*" id="multi">Multiplica</option>
                <option value="/" id="divide">Divide</option>

            </select>
            <br>la suma es: <br>
            <!-- aquí mostraremos el resultado. Input desactivado para que no se pueda modificar -->
            <input type="text" id="total" disabled>
            <input type="button" value="Resultado" onclick="enviar()">
       </form>
0

Yo tambien dejo mi calculadora recien terminada jeje

<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <input type="text" id="comnume1" placeholder="Inserte un numero">
    <input type="text" id="comnume2" placeholder="Inserte un numero">

    <p>Seleccione la operacion</p>
    <select name="Operacion" id="Operacion">
        <option value="+">Suma</option>
        <option value="-">Resta</option>
        <option value="*">Multi</option>
        <option value="/">Division</option>
        <option value="%">Porcentaje</option>
    </select>
    <button onclick="operacion()">Calcular</button>
    <p>El resultado de la cuenta es: <span id="resultado"></span></p>

<script>
        function operacion() {
        var num1 = $('#comnume1').val(); 
        var num2 = $('#comnume2').val(); 
            var x = $('#Operacion').val(); 

            if(x == '+') {
            var resultado = parseInt(num1) + parseInt(num2);
            $('#resultado').text(resultado);
            }
            if(x == '-') {
            var resultado = parseInt(num1) - parseInt(num2);
            $('#resultado').text(resultado);
            }
            if(x == '*') {
            var resultado = parseInt(num1) * parseInt(num2);
            $('#resultado').text(resultado);
            }
            if(x == '/') {
            var resultado = parseInt(num1) / parseInt(num2);
            $('#resultado').text(resultado);
            }
            if(x == '%') {
            var resultado = (parseInt(num1) / 100) * parseInt(num2);
            $('#resultado').text(resultado);
            }

        }
</script>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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