Question

这是通过第二次点击或click计数来寻求解决方案；不是与其他考虑onchange解决方案的问题重复的内容。

我试图在香草JS中再次单击任何表单元素后仅显示div。上下文是；如果表单已更新，我想显示一个刷新其报价的通知。因此，如果用户返回并第二次单击任何表单元素，则为0。 div。

我有以下内容用于计算点击次数；但是我怎么能只将其限制在我所有的表单元素上（我不需要在第二次单击任何东西之后仅触发表单）。

document.getElementsByTagName("input, select, textarea, option, optgroup, fieldset, label").addEventListener("click", clickFormTwo);

var currentLetter = 0;
var intervalID;
var clickCount = 0; 
var updateRate = document.querySelector('.updateRate');

function clickFormTwo {
    if  (!isStart) {
        clickCount++;
        if (clickCount == 1) {
            // first click stuff
        }
        if (clickCount == 2) {
          updateRate.style.display = "block";
        }
    }       
}

上下文： 这是一个内联报价工具；填写表单元素后，报价将生成内联。我正在尝试创建一个“横幅”，该横幅将询问用户是否第二次调整了任何Web表单元素。抱歉造成混乱。

更新后的尝试：

document.querySelectorAll("input, select, textarea, option, optgroup, fieldset, label").addEventListener("click", clickFormTwo);

var currentLetter = 0;
var intervalID;
var clickCount = 0; 
var updateRate = document.querySelector('.updateRate'); 
var clickCount = 0;

function clickFormTwo(e) {
  clickCount++;
  if (clickCount === 1) {
    // first click stuff
    e.preventDefault();


  } else if (clickCount === 2) {
    clickCount = 0;
    updateRate.style.display = "block";
  }
}

控制台错误：

VM443:1 Uncaught TypeError: document.querySelectorAll(...).addEventListener is not a function
    at <anonymous>:1:89

html / css上下文

<div class="updateRate">Update Rate</div>

<style>
.updateRate { 
   display:none;
   top: 0px;
   position: fixed;
   width: 100%;
   left: 0px;
   z-index: 11111;
}
#rate, .updateRate { 
    background: #354563;
    color: #ffffff;
    cursor: pointer;
    text-align: center;
    padding: 10px;
}
</style>

Answer 1

功能应该是这样

var clickCount = 0;

function clickFormTwo(e) {
  clickCount++;
  if (clickCount === 1) {
    // first click stuff
    e.preventDefault();


  } else if (clickCount === 2) {
    clickCount = 0;
    updateRate.style.display = "block";
  }
}

在任何表格元素的第二次单击后显示div

1 个答案: