En este tutorial se explica cómo crear un formulario en una página web donde las personas puedan ingresar dos números y luego elegir si quieren sumarlos o restarlos. Cuando hacen clic en el botón “Calcular”, la página mostrará el resultado de la operación que seleccionaron.
Para hacer esto, utilizamos dos tipos de código: HTML y JavaScript. El HTML es el lenguaje que se utiliza para crear el contenido de la página web, como los formularios y los botones. El JavaScript es un lenguaje de programación que permite agregar interactividad a la página web, como la capacidad de realizar cálculos.
Primero, creamos el formulario en HTML. Es un formulario simple que pide a las personas que ingresen dos números y luego elijan si quieren sumarlos o restarlos. También hay un botón para que puedan hacer clic y obtener el resultado.
<!DOCTYPE html>
<html>
<head>
<title>Suma y Resta con JavaScript</title>
</head>
<body>
<h1>Suma y Resta con JavaScript</h1>
<form>
<input type="number" id="num1" name="num1">
<select id="operacion" name="operacion">
<option value="suma">+</option>
<option value="resta">-</option>
</select>
<input type="number" id="num2" name="num2">
<input type="submit" value="Calcular">
</form>
<div id="resultado"></div>
<script src="script.js" defer></script>
</body
</html>
Luego, utilizamos JavaScript para hacer que la página web realice la operación matemática y muestre el resultado en la página. Cuando la persona hace clic en el botón “Calcular”, JavaScript toma los números ingresados y la operación seleccionada y los utiliza para realizar el cálculo. Luego, muestra el resultado en la página web.
La parte JavaScript del código crea un objeto form que representa el formulario HTML, y un objeto resultado que representa el elemento div donde se mostrará el resultado. Luego, se agrega un “escucha” de eventos a form, de manera que cuando se envíe el formulario, se llame a una función anónima que toma los valores ingresados por el usuario, llama a la función calcular para realizar la operación matemática y muestra el resultado en resultado.
const form = document.querySelector('form');
const resultado = document.querySelector('#resultado');
form.addEventListener('submit', function(e) {
e.preventDefault();
const num1 = parseInt(document.querySelector('#num1').value);
const num2 = parseInt(document.querySelector('#num2').value);
const operacion = document.querySelector('#operacion').value;
const resultadoOperacion = calcular(operacion, num1, num2);
resultado.textContent = `El resultado es: ${resultadoOperacion}`;
});
function calcular(operacion, num1, num2) {
if (operacion === 'suma') {
return num1 + num2;
} else if (operacion === 'resta') {
return num1 - num2;
}
}
La función calcular toma tres parámetros: operacion (una cadena que indica si se debe realizar una suma o una resta), num1 (el primer número de la operación) y num2 (el segundo número de la operación). La función utiliza una estructura if/else para determinar qué operación se debe realizar, y luego devuelve el resultado utilizando el operador + o -.
En resumen, este tutorial muestra cómo crear un formulario HTML simple que utiliza JavaScript para realizar operaciones matemáticas. Este es solo un ejemplo básico, pero hay muchas formas más avanzadas de trabajar con formularios y realizar cálculos en JavaScript.
