Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Evento onclick

JavaScript - Evento onclick

Volver
Nuevo Tema
<<>>
 
Vista:

Evento onclick

Publicado por Paco (2 intervenciones) el 05/04/2023 13:50:12
Un saludo a todas y todos.
Soy un abuelo que ha empezado a trastear con HTML5, CSS3 y JavaScript.
Voy llevándolo poco a poco.
Pero tengo que resolver un ejercicio que se me ha atragantado y que paso a exponeros.
Más que la solución, me gustaria poder entender como se resuelve.
Gracias de antemano.

Dado el siguiente codigo HTML :

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">

<title>Cálculo del factorial</title>

</head>

<body>
<form name="fomulario1">

<h2>Cálculo del factorial:</h2>
<p>
Número: <input type="text" id="num1" size="20">
</p>
<br>
<p>
El factorial es: <input type="text" id="resultado" size="20" readonly>
</p>
<br>
<br>
<p>
<input type="Button" value="Calcula" onclick = 'document.getElementById("resultado").value = factorial(document.getElementById("num1").value)' >
</p>
</form>

Debo escribir una función en javascript llamada factorial que añadiré en un archivo externo para que este programa funcione
El evento ONCLICK es el que me está liando.
¿Me echais una mano?
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de juan jose
Val: 42
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Evento onclick

Publicado por juan jose (18 intervenciones) el 05/04/2023 14:53:24
Código Html

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
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cálculo del factorial</title>
    <script src="logica.js"></script>
</head>
<body>
    <form name="fomulario1">
 
        <h2>Cálculo del factorial:</h2>
        <p>
        Número: <input type="number" id="num1" size="20">
        </p>
        <br>
        <p>
        El factorial es: <input type="number" id="resultado" size="20" readonly>
        </p>
        <br>
        <br>
        <p>
        <input type="Button" value="Calcula" onclick = 'calculaFactorial()' >
        </p>
        </form>
</body>
</html>

El archivo javascript logica esta linkado en el html, asignada la funcion js al evento onclick, si haces un input que sea numerico, pues haz que el type corresponda.

Código js

1
2
3
4
5
6
7
8
function calculaFactorial(){
    let numBase = document.getElementById('num1').value;
    let resultado = 1;
    for (let i = 1; i<= numBase; i++){
        resultado = i * resultado;
    }
    document.getElementById('resultado').value = resultado;
}

salu2
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Evento onclick

Publicado por Paco (2 intervenciones) el 06/04/2023 16:38:51
Muchas gracias Juan José.
Algo parecido había hecho yo, pero no me vale.
El reto es programar una función para ESE código html sin variarlo.
En caso de que no fuera posible hacerlo sin variar el código, saber porqué.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Ivan

Evento onclick

Publicado por Ivan (118 intervenciones) el 08/04/2023 10:17:28
Hola,

yo haría el código un poco más limpio

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Cálculo del factorial</title>
<script>
  function factorial(n) {
    n = parseInt(n);
    if (n < 0) return "Número incorrecto ...";
    if (n > 0) return n * factorial(n-1);
    else return 1;
  }
</script>
</head>
 
<body>
<h2>Cálculo del factorial:</h2>
<p>Número: <input type="text" id="num1" size="20"></p>
<p>El factorial es: <input type="text" id="resultado" size="20" readonly></p>
<button onclick="document.getElementById('resultado').value = factorial(document.getElementById('num1').value)">Calcula</button>
</body>
</html>

Pero si no quieres tocar el tuyo por algún motivo, simplemente añade la parte del <script> con la función factorial y funcionará.

PD: La función factorial es un ejemplo típico de función recursiva y el factorial teóricamente sólo es aplicable a numeros naturales. Como anéctoda, el factorial de 0 es 1.

Un saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar