Question

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

但是，即使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表单将其表单提交到当前页面，因此您每次提交时都会重新加载页面，因为JS函数永远不会被调用

您可以做的是通过在ffmpeg -y -f mpegts -i in.ts -c copy out.mp4语句之前调用e.preventDefault()来防止默认（重载）行为。

，您的console.log("hi");将更改为<input type="submit"...

也不要忘记将参数添加到<input type="submit" onclick="timer(event)" />

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结构。您应该尝试这样做。我添加了“事件”，因此可以定位输入元素。但是，您也可以给表单标签起一个名字，或者设置一个I，以便在单击“提交”按钮时直接将其定位。

 <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。

没有onclick事件

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

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

Javascript设置为侦听该表单提交的任何内容，然后阻止它发生。

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事件运行

3 个答案: