Quiero crear una página que muestre un mensaje cuando el usuario da una entrada. Pero en el momento en que hago clic en el botón para mostrar el mensaje, la página se recarga instantáneamente y borra la página:
Código HTML:
<!DOCTYPE html> <html lang="en"> <head> <title>Fibonacci Series</title> </head> <body> <form onsubmit="return getFibonacci()"> <table> <tr> <td>Enter the number to get a fibonacci</td> <td><input type="number" id="fibo" name="fibo" /></td> </tr> <tr> <td colspan="2"><input type="submit" id="fibobtn" name="fibobtn" value="Get Fibonacci" /></td> </tr> </table> <div id="result"></div> </form> <script src="script.js"></script> </body> </html>Código JavaScript:
function getFibonacci() { try { var num = document.getElementById("fibo").value; var fib0 = 0; var fib1 = 1; var next; const fib = []; for (var i = 0; i < num - 1; i++) { next = fib0 + fib1; fib0 = fib1; fib1 = next; fib.push(fib0) document.getElementById("result").innerHTML = fib; } } catch (err) { document.getElementById("result").innerHTML = err; } }Evita eso agregando event.preventDefault. También debe convertir el valor de la entrada en número, lo que se hace agregando el operador unario +document.getElementById("fibo").value; . También puedes usar parseInt
function getFibonacci(event) { event.preventDefault() try { var num = +document.getElementById("fibo").value; var fib0 = 0; var fib1 = 1; var next; const fib = []; for (var i = 0; i < num - 1; i++) { next = fib0 + fib1; fib0 = fib1; fib1 = next; fib.push(fib0) document.getElementById("result").innerHTML = fib; } } catch (err) { document.getElementById("result").innerHTML = err; } } <form onsubmit="return getFibonacci(event)"> <table> <tr> <td>Enter the number to get a fibonacci</td> <td><input type="number" id="fibo" name="fibo" /></td> </tr> <tr> <td colspan="2"><input type="submit" id="fibobtn" name="fibobtn" value="Get Fibonacci" /></td> </tr> </table> <div id="result"></div> </form>Se está recargando porque el comportamiento predeterminado de los controladores de envío es recargar la página. Para evitar esto, debemos detener esto usando event.preventDefault().
Pruebe los siguientes cambios:
<!DOCTYPE html> <html lang="en"> <head> <title>Fibonacci Series</title> </head> <body> <form onsubmit="return getFibonacci(event)"> <table> <tr> <td>Enter the number to get a fibonacci</td> <td><input type="number" id="fibo" name="fibo" /></td> </tr> <tr> <td colspan="2"><input type="submit" id="fibobtn" name="fibobtn" value="Get Fibonacci" /></td> </tr> </table> <div id="result"></div> </form> <script src="script.js"></script> </body> </html> function getFibonacci(event) { event.preventDefault() try { var num = document.getElementById("fibo").value; var fib0 = 0; var fib1 = 1; var next; const fib = []; for (var i = 0; i < num - 1; i++) { next = fib0 + fib1; fib0 = fib1; fib1 = next; fib.push(fib0) document.getElementById("result").innerHTML = fib; } } catch (err) { document.getElementById("result").innerHTML = err; } }