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

时间:2018-10-26 15:30:50

标签: javascript

这是通过第二次点击或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>

1 个答案:

答案 0 :(得分:0)

功能应该是这样

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