Flask中JavaScript简单计数功能不生效无报错问题求助

你的计数功能失效是因为点击按钮触发了表单默认提交行为，导致页面直接重载，JS中定义的计数器、定时器变量刚初始化就被销毁，所以看不到计数效果，Flask本身逻辑正常所以不会报错。

你可以根据自己的需求选择以下任意一种方案修复：

• 方案1：阻止按钮点击的默认提交行为
  修改JS中绑定点击事件的代码，阻止默认表单提交：

  document.getElementById("btncapt").addEventListener("click", function(e) {
    // 阻止表单默认提交刷新页面的行为
    e.preventDefault();
    startTimer();
  });
  

• 方案2：将提交按钮改为普通按钮
  把input的type属性从submit修改为button，从根源上避免表单提交：

  <input type="button" id="btncapt" class="btn btn-primary" name="start" value="start">
  

• 如果你需要同时实现提交表单更新页面图片的需求，请使用AJAX异步提交请求，不要走表单同步提交，避免页面刷新导致JS状态丢失，示例代码如下：

  document.getElementById("btncapt").addEventListener("click", async function(e) {
    e.preventDefault();
    startTimer();
    // 异步提交表单更新图片
    await fetch('/vistgen', {
      method: 'POST',
      body: new FormData(document.querySelector('form'))
    });
    // 手动替换图片地址
    document.querySelector('img').src = '/static/img/animated_captura.gif';
  });
  

内容的提问来源于stack exchange，提问作者Eduardo