Javascript SetInterval不会从HTML表单的onClick事件运行_Javascript_Html_Event Handling_Setinterval

Javascript SetInterval不会从HTML表单的onClick事件运行

javascript html

Javascript SetInterval不会从HTML表单的onClick事件运行,javascript,html,event-handling,setinterval,Javascript,Html,Event Handling,Setinterval,我刚刚在页面上写了一个计时器函数，它从5秒开始倒计时。接下来，我想创建一个表单，在提交时调用timer函数但是，即使onClick触发函数并且控制台记录hi，它也不会执行setInterval 当我立即调用函数而不是提交表单时，setInterval工作是否有原因？经过一些研究，我仍然无法找出原因 <body> <h1 id="title"> This a simple timer <form action="">

我刚刚在页面上写了一个计时器函数，它从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>

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

您可以通过在console.loghi之前调用e.preventDefault来防止defaultreload行为；声明

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

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

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

此外，除了标题的实际文本之外，你不应该在文章中添加任何内容。

我发现这里有两个问题。你的html结构。你应该试试这个。我添加了“event”，这样就可以针对输入元素了。但是，您也可以给表单标记一个名称，或者设置一个I'd，以便在单击submit按钮时直接将其作为目标

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

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

没有onclick事件

我想就这些了

控制台中有任何错误吗？没有，没有任何错误您为什么建议使用timerthis而不是timerevent？它给了我这个错误-VM1374 index.js:7未捕获类型错误：event.parentNode.preventDefault不是一个函数它已被解决。我想用它来获取元素并防止表单被提交@他在解决这个问题上做得很好。我在计算机上运行了一个测试并修复了打字错误。好了，谢谢！不知道为什么我没有想到要阻止自动提交。这个解决方案工作得很好我忘了跟进一件事-为什么这个函数不再是console.loghi？它应该是日志。你能给我们看看你的更新代码吗？

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

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

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

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