在提交按钮上更新全局计数器变量单击jQuery

时间:2018-05-13 18:36:22

标签: javascript jquery html

当点击type =“submit”的按钮时,我正在尝试更新JavaScript中的全局计数器变量。

我的提交按钮定义如下:

<button
  id="submitClicked"
  type="submit"
  value="Add &amp View Next"
> 

我在JavaScript中使用以下代码来更新我称为orderCounter的全局变量,每次单击“添加并查看下一个”按钮时,该变量都会递增:

var orderCounter;

window.onload = function () {
  document
    .getElementById("submitClicked")
    .onclick=incrementCounter;
};

function incrementCounter() {
  if (orderCounter == null) {
    orderCounter = 0;
  } else {
    orderCounter = orderCounter + 1;
  }

  alert(orderCounter);
  return orderCounter;
}

此代码的alert始终显示0.任何人都可以看到我出错的地方?

注意:除了在HTML表单中使用submitClicked之外,我还尝试在onClick ID上使用jquery .click。

我意识到这应该很简单;不知道我哪里错了。

谢谢!

2 个答案:

答案 0 :(得分:1)

问题是,每次单击提交按钮时,页面都会刷新,因此orderCounter varriable会自行重置。一种解决方案是持久等待,以便每次加载页面时都不会重新初始化其值。一种解决方案是使用kookies:https://www.w3schools.com/js/js_cookies.asp。 我希望这会让你感到高兴

答案 1 :(得分:0)

修复是运行函数postValues()&#34; onClick&#34;按钮类型=提交和使用会话变量,遵循与此帖子相同的逻辑:Auto Increment in Session using Javascript is not working

我清除另一个文件中的sessionStorage变量。

工作代码:

function postValues() {

if(sessionStorage.getItem("count") == null){

  counter=sessionStorage.setItem("count", 1);
  counters = 1;

} else {

  counters= parseInt(sessionStorage.getItem("count")); 
  counters++;
  counter=sessionStorage.setItem("count", counters);

}

alert(counters);

document.getElementById("counter").value = counter; 

}