为什么单击 'form-on submit' 按钮后页面会立即重新加载？

Question

我想创建一个在用户输入时显示消息的页面。但是当我点击按钮显示消息时，页面立即重新加载并清除页面：

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>

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;
    }
}

Answer 1

通过添加 event.preventDefault 来防止这种情况发生。您还需要将输入的值转换为数字，这是通过添加一元运算符 +document.getElementById("fibo").value; 来完成的。您也可以使用 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>

Answer 2

正在重新加载，因为提交处理程序的默认行为是重新加载页面。为了避免这种情况，我们通过使用 event.preventDefault().

来阻止它

尝试以下更改：

<!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;
    }
}

为什么单击 'form-on submit' 按钮后页面会立即重新加载？

Why is the page instantly reloading on clicking the 'form-on submit' button?

javascript

html

dom