0

	<script>
		function suma ()
		{
			var num1=nume1(document.getElementById('num1').value);
			var num2=nume2(document.getElementById('num2').value);
			var resul=nume1+nume2;
			document.getElementById('resul').value;
		}
	</script>
	<!-- HOJA DE ESTILO CSS -->
	<style class="color">
		
		* {
			margin-left: 10%;
			margin-right: 10%;
		}

		.cuerpo {
			background: #b3b6b7;
			font-family: poiret one;
		}


		.encabezado {
			background:  #f0f3f4;
			height: 75px;
			z-index: 1;
		}

		.encabezado h1 {
			text-align: center;
			padding-top: 25px;
			text-decoration: none;
		}
		.grow:hover {
			-webkit-transform: scale(1.5);
			-ms-transform: scale(1.5);
			transform: scale(1.5);
		}

		.calculadora {
			background: #f0f3f4;
			margin-top: 30px;
			padding-top: 20px;
			padding-bottom: 20px;
			font-family: poret one;
		}

		.calculadora .calcu .datos{
			padding-top: 10px;
			padding-bottom: 20px;

		}

		.calculadora .calcu .select {
			padding-bottom: 20px;
		}


		textarea {
			resize: none;
		}
	</style>
	<!-- HOJA DE ESTILO CSS -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Calculadora</title>
	<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
</head>
<body class="cuerpo">



	<div class="encabezado">
		<h1>Juan Daniel Lovato Gamez 25-3614-2014</h1>
	</div>


	<div class="calculadora">

		<form class="calcu" action="">
			<fieldset class="datos">
				<legend>Ingrese los valores</legend>
				<p>Ingrese el primer numero</p>
				<input type="text" name="primerN" maxlength="3" size="20" id="num1">
				<p>Ingrese el segundo numero</p>
				<input type="text" name="segundoN" maxlength="3" size="20" id="num2">
			</fieldset>

			<fieldset class="select">
				<legend>Seleccione la operacion</legend>
				<p>Seleccione la operacion a realizar</p>
				<select name="opciones" id="select">
					<option value="1">	</option>
					<option value="2" id="2" onclick="suma()">suma</option>
					<option value="3" id="3" onclick="resta()">resta</option>
					<option value="4" id="4" onclick="">multiplicar</option>
					<option value="5" id="5" onclick="">dividir</option>
					<option value="6" id="6" onclick="">modulo</option>
					<option value="7" id="7" onclick="">promedio</option>
					<option value="8" id="8" onclick="">maximo</option>
					<option value="9" id="9" onclick="">minimo</option>
				</select><br><br>
				<input class="grow" type="submit" value="Realizar operacion" onclick="">
				<input class="grow" type="reset" value="Borra todo">
			</fieldset>

			<fieldset class="resultados">
				<legend>Resultados</legend>
				<textarea name="resultados" id="resul" cols="60" rows="1"></textarea>
			</fieldset>
		</form>
	</div>
</body>
</html>

tengo esta calculadora que tengo que realizar como tarea pero soy nuevo en js y nose como hacer para llamar el resultado al textarea o nose si estoy realizando algo mal en el script, todo esta en un solo documento xq asi me o exige el docente, deante mano gracias para los que deseen ayudarme con esta pregunta

4
  • Creo que en la parte en dónde haces la suma, tienes que cambiar esto: document.getElementById('resul').innerHTML = resul;
    – track3r
    el 6 mar. 2018 a las 15:26
  • ¿Estas usando solo Javascript o también Jquery? el 6 mar. 2018 a las 15:26
  • como les digo soy nuevo en js y segun yo estoy usando ja
    – Lovato
    el 6 mar. 2018 a las 15:32
  • ¿En que momento quieres hacer la operación? ¿Al seleccionar una opción del select o al pulsar el boton Realizar operacion?
    – Kevin
    el 6 mar. 2018 a las 16:13

2 respuestas 2

0

Bueno explico los cambios que hice al ejemplo que compartiste. No se realiza la funciòn de suma porque añades un evento onclick a un option, en Firefox te funcionaria normal pero en IE o Chrome no reconoce el evento. Por lo tanto use como disparador el input Realizar operación el cual cambie por un button de type="button" puesto que si lo dejas tal como esta lo que hará sera mandar la información de tu formulario al action que hayas definido (cosa que no hay y solo se queda en blanco). Por otro lado cambie el type de tus inputs de entrada a number para que solo valides si esta vació o es un numero correcto. La demás explicación de la funcionalidad esta en el código de mas abajo. Aqui puedes ver la sintaxis de switch en javascript.

function RealizarOperacion() {
  //Obtenemos los valores de los campos y la operacion selcionada
  var num1 = document.getElementById('num1').value;
  var num2 = document.getElementById('num2').value;
  var operation = document.getElementById('select').value;

  //aqui validamos que los campo no sean vacios o sean numeros con espacios o puntos demas
  //puedes ser mas preciso diciendo que campo esta mal llenado
  if (num1 == "" || num2 == "" || isNaN(num1) || isNaN(num2)) {
    alert("Ingrese valores correctos en los campos para realizar la operaciòn.");
    return;
  }
  //como ya sabemos que no sun numeros qu estan bien ahora los parseamos
  num1 = parseFloat(num1);
  num2 = parseFloat(num2);

  //si no son vacios hacemos un switch para que entre en un case por  operacion
  //segun el value del select
  switch (operation) {
    case "1": //no selecciono nada 
      alert("Seleccione una operaciòn");
      break;
    case "2": //selecciono la suma
      Suma(num1, num2);
      break;
  }
}

function Suma(num1, num2) {
  var resul = num1 + num2;
  document.getElementById('resul').value = resul;
}
<!-- HOJA DE ESTILO CSS --><style class="color">* {
  margin-left: 10%;
  margin-right: 10%;
}

.cuerpo {
  background: #b3b6b7;
  font-family: poiret one;
}

.encabezado {
  background: #f0f3f4;
  height: 75px;
  z-index: 1;
}

.encabezado h1 {
  text-align: center;
  padding-top: 25px;
  text-decoration: none;
}

.grow:hover {
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
}

.calculadora {
  background: #f0f3f4;
  margin-top: 30px;
  padding-top: 20px;
  padding-bottom: 20px;
  font-family: poret one;
}

.calculadora .calcu .datos {
  padding-top: 10px;
  padding-bottom: 20px;
}

.calculadora .calcu .select {
  padding-bottom: 20px;
}

textarea {
  resize: none;
}

</style><!-- HOJA DE ESTILO CSS -->
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Calculadora</title>
  <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
</head>

<body class="cuerpo">

  <div class="encabezado">
    <h1>Juan Daniel Lovato Gamez 25-3614-2014</h1>
  </div>

  <div class="calculadora">

    <form class="calcu" action="">
      <fieldset class="datos">
        <legend>Ingrese los valores</legend>
        <p>Ingrese el primer numero</p>
        <input type="number" name="primerN" maxlength="3" size="20" id="num1">
        <p>Ingrese el segundo numero</p>
        <input type="number" name="segundoN" maxlength="3" size="20" id="num2">
      </fieldset>

      <fieldset class="select">
        <legend>Seleccione la operacion</legend>
        <p>Seleccione la operacion a realizar</p>
        <select name="opciones" id="select">
					<option value="1"></option>
					<option value="2" id="2" onclick="">suma</option>
					<option value="3" id="3" onclick="">resta</option>
					<option value="4" id="4" onclick="">multiplicar</option>
					<option value="5" id="5" onclick="">dividir</option>
					<option value="6" id="6" onclick="">modulo</option>
					<option value="7" id="7" onclick="">promedio</option>
					<option value="8" id="8" onclick="">maximo</option>
					<option value="9" id="9" onclick="">minimo</option>
				</select><br><br>
        <button class="grow" type="button" value="" onclick="RealizarOperacion()">Realizar operacion</button>
        <input class="grow" type="reset" value="Borra todo">
      </fieldset>

      <fieldset class="resultados">
        <legend>Resultados</legend>
        <textarea name="resultados" id="resul" cols="60" rows="1"></textarea>
      </fieldset>
    </form>
  </div>
</body>


</html>

0

Solo te faltó asignarle el valor a tu textarea.

     function suma ()
    {
        //Conviertes a flotante el valor que tienes en el campo de texto 1
        //Si solo vas a trabajar con enteros puedes cambiar parseFloat por **parseInt**
        var num1= parseFloat(document.getElementById('num1').value);
        var num2= parseFloat(document.getElementById('num2').value);
        //Asignas a la variable resul la suma de ambos números
        var resul=num1+num2;
        //Aquí es donde tienes que hacer el cambio
        document.getElementById('resul').value = resul;
    }
3
  • gracias amigo, pero sigue sin mostrarme el resultado de la operación
    – Lovato
    el 6 mar. 2018 a las 15:38
  • Donde tienes definido la función nume1 y nume2?? el 6 mar. 2018 a las 16:01
  • Edité la respuesta, revisa ahora que tenias unas cuantas cosas mal, te comentarie para que entiendas lo que hice. Te recomiendo que aprendas a usar la consola del navegador, ahi podrás verificar si tienes algún error en tu código javascript. Saludos el 6 mar. 2018 a las 16:05

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.