SetInterval 不运行来自 HTML 表单的 onClick 事件

Question

我刚刚写了一个计时器函数，它在页面上从 5 秒开始倒计时。接下来我想创建一个在提交时调用计时器函数的表单。

但是即使 onClick 触发了函数（和控制台日志 "hi"），它也从不执行 setInterval。

为什么当我立即调用函数时 setInterval 起作用，但当我提交表单时却不起作用？经过一些研究，我仍然无法找出原因。

  <body>
    <h1 id="title">
      This a simple timer
      <form action="">
        <input type="text" name="duration" />
        <input type="submit" onclick="timer()" />
      </form>
    </h1>
    <script src="src/index.js"></script>
  </body>

javascript

const title = document.getElementById("title");
const btn = document.getElementById("btn");

const timer = () => {
  console.log("hi");
  let interval = 5;
  let countdown = window.setInterval(() => {
    title.innerText = "00:" + interval;
    interval--;
    if (interval === 0) {
      title.innerText = "DONE";
      clearInterval(countdown);
    }
  }, 1000);
};

Answer 1

由于 HTML 将 action 属性设置为空字符串的表单将其表单提交到当前页面，每次提交时都会重新加载页面，因为您的 JS 函数永远不会被调用

您可以做的是通过在 console.log("hi"); 语句之前调用 e.preventDefault() 来防止默认（重新加载）行为。

你的<input type="submit"...会变成<input type="submit" onclick="timer(event)" />

也不要忘记将参数添加到const timer = e => {...

Answer 2

在 html 中提交表单意味着用 action 指定的 URL 将加载您表单中的数据。如果将 action 设置为空字符串，则当前页面会重新加载表单数据。因此，在您的情况下，每次单击提交按钮时都会重新加载页面。

如果您只想通过按钮启动计时器，则不需要表单，也不需要提交类型的输入。使用

<body>
    <h1 id="title">
      This a simple timer
    </h1>
    <input type="text" name="duration" />
    <input type="button" onclick="timer()" value="click me!" />
    <script src="src/index.js"></script>
</body>

此外，除了标题的实际文字外，您不应该在 <h1> 中添加任何内容。

Answer 3

我看到这里有两个问题。您的 html 结构。你应该试试这个。我添加了“事件”，这样我就可以定位输入元素。但是你也可以给表单标签一个名字或者设置一个当提交按钮被点击时我会直接定位它。

 <body>
<h1 id="title"> This a simple timer </h1>
<form action="">
    <input type="text" name="duration" />
    <input type="submit" onclick="timer(event)"/>
  </form>
<script src="src/index.js"></script>
  </body>

以前，当 onclick 事件触发时，您通过替换 #title 中的文本内容来更新 DOM，并且该标记也会包装表单。我认为你应该让他们独立。 2，页面重新加载，因此您应该使用 preventDefault() 处理页面提交；在表格上。请参阅下面的示例

const title = document.getElementById("title");
        const btn = document.getElementById("btn");

    const timer = e => {
        e.preventDefault();

        console.log("hi");
        let interval = 5;
        let countdown = window.setInterval(() => {
            title.innerText = "00:" + interval;
            interval--;
            if (interval === 0) {
            title.innerText = "DONE";
            clearInterval(countdown);
            }
        }, 1000);
    };

这是另一种方法，我调整了html和javascript。

No onclick event

<h1 id="title"> This a simple timer </h1>
  <form action="" name="simple_timer">
    <input type="text" name="duration" />
    <input type="submit"/>
  </form>

我们只是设置了一个表单名称。

Javascript set to listen for any submission by that form then prevents it from occuring.

const title = document.getElementById("title");
        const timer = document.forms['simple_timer'];

        timer.addEventListener('submit', (e) => {
            e.preventDefault();

            console.log("hi");
            let interval = 5;
            let countdown = window.setInterval(() => {
                title.innerText = "00:" + interval;
                interval--;
                if (interval === 0) {
                title.innerText = "DONE";
                clearInterval(countdown);
                }
            }, 1000);
        });

猜猜就这些了。

SetInterval 不运行来自 HTML 表单的 onClick 事件

SetInterval does not run from HTML form's onClick event

html

javascript

event-handling

setinterval

SetInterval 不 运行 来自 HTML 表单的 onClick 事件

SetInterval does not run from HTML form's onClick event

html

javascript

event-handling

setinterval

SetInterval 不运行来自 HTML 表单的 onClick 事件