How can I make the result of the operation in the textarea?

Question

How can I make the result of the operation in the textarea?

Navigation

#1 by (0 votes)
#2 by (0 votes)

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>

I have this calculator that I have to perform as a task but I'm new to js and I do not know how to call the result to the textarea or if I'm doing something wrong in the script, everything is in a single document xq so I demand the teacher, deante hand thanks for those who wish to help me with this question

javascript html5 html

asked by Lovato 06.03.2018 в 15:59

source

2 answers

0

You only needed to assign the value to your 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;
    }

answered by 06.03.2018 в 16:33

Kivy-Buildozer: Aidl not found, please install it. How can I assign a task to a thread?

score 0 · Accepted Answer

Well, I explain the changes I made to the example you shared. The addition function is not performed because you add an onclick event to an option, in Firefox it would work normally but in IE or Chrome does not recognize the event. Therefore, use the Input Perform Operation as a trigger, which changes by a type="button" button, because if you leave it as it is, it will send the information on your form at action that you have defined (which is not there and only it is blank). On the other hand, change the type of your input inputs to number so that you only validate if it is empty or is a correct number. The other explanation of the functionality is in the code below. Here you can see the switch syntax in 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>