Entrada destacada

Como usar enums en Android, kotlin

el
0

Prácticas javascript: Calcular el área de un triángulo rectángulo

el
En esta práctica utilizaremos un ejemplo parecido al de la práctica 1. En este caso calcularemos el área de un triángulo rectángulo.
La base y la altura la obtendremos de campo input tipo number y como en la practica 1, mediante un botón invocaremos a una función javascript que obtenga el valor de los inputs y calcule el área.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <title>Área triángulo</title>
 <style type="text/css">
  #areaResultado{
   width: 150pt;
   height: 14pt;
   margin-top: 5px;
  }
 </style>
</head>
<body>
 <h3>Área de un triángulo rectángulo</h3>

 <input type="number" id="base" placeholder="Base">
 <input type="number" id="altura" placeholder="Altura">
 <button onclick="obtenerArea()">Calcular área</button>
 <br><br>
 <label>Área: </label>
 <div id="areaResultado">
 </div>
 <script>
  function obtenerArea(){
   var areaResultado = document.getElementById("areaResultado");
   var b = parseInt(document.getElementById("base").value);
   var h = parseInt(document.getElementById("altura").value);

   var area = (b * h) / 2;

   areaResultado.innerHTML = "" + area;
  }
 </script>

</body>
</html>

Agregar contenido html sin recargar toda la página.

Lo nuevo en este ejemplo se encuentra en las líneas 26 y 32. En el html hemos escrito una etiqueta div con el id "areaResultado" en la cual mostraremos el resultado de calcular el área. 
Como mencionábamos en la práctica 1 al utilizar document.writeln() todo el contenido del documento se remplaza por el nuevo contenido. En este ejemplo hemos solucionado esto utilizando un componente donde añadir el contenido nuevo y utilizando innerHTML logramos que sólo se sustituya el contenido del elemento al que aplicamos dicha propiedad y no a todo el documento. 
También se puede notar que no hay necesidad de acceder al valor del elemento div, solo necesitamos la referencia de dicho elemento.

Mostrar el resultado de la operación en un textarea

Si lo que queremos es agregar el contenido a un textarea desde javascript, podemos hacerlo de la misma manera que hemos hecho con el div,  pero podemos utilizar un ejemplo diferente modificando su propiedad value.


var textResultado = document.getElementById("textarea1");
textResultado.value = area;


Existen algunas otras maneras de hacer esto, pero ya se verán en prácticas siguientes.

See the Pen área de un triángulo by Jesus Tepec (@JesusTepec) on CodePen.

Comentarios

  1. Unknown29 de marzo de 2020, 21:59

    como hacer q un programa de el resultado de base y altura

    ResponderEliminar
  2. Unknown8 de julio de 2021, 14:20

    Disculpe para hacer que muestre una ventana emergente cuando se ingrese un 0 en los campos de entrada, cómo se implementaria eso?

    ResponderEliminar
    Respuestas
    1. Traker20 de agosto de 2021, 9:38

      puedes crear una función que valide eso al hacer la multiplicación o una especifica para ello:

      input type="number" onchange="validanum(this.value);">

      script>
      function validanum(numero){
      if(numero<=0){
      alert('El numero debe ser mayor a cero');
      }
      }
      /script>


      también puedes validar esto con html5 dentro de las propiedades del input con min="#" max="#" donde le puedes decir que el valor mínimo sea 1 y mostrara un mensaje tipo tooltip mientras estas dentro del input

      input type="number" min="1">

      (ojo le quite los < a el codigo para que me permitiría publicarlo)
      Espero te sirva, saludos.

      Eliminar

Publicar un comentario