两次点击在同一个按钮上的两个事件

Posted 2023-02-24

【中文标题】两次点击在同一个按钮上的两个事件

【英文标题】：Two events on the same button with two click

【发布时间】：2018-09-08 03:45:18

【问题描述】：

我需要创建一个像这样工作的按钮：

var i = true

first click --> var i = false
second click --> var i = true
....

HTML

 <input type="button" value="test" onclick="stop(); start();" />

如何在我的 JS 文档中指定这些函数？

【问题讨论】：

Toggle a boolean in javascript

【参考方案1】：

您可以通过这样做来切换布尔值：

var b = true;
b = !b

在你的情况下使用：

<input type="button" value="test" onclick="b = !b;" />

最好用函数来做这个

var b = true;
function toggle ()  b = !b; console.log(b) 

在你的 html 中

<input type="button" value="test" onclick="toggle();" />

【参考方案2】：

你可以这样做

<input type="button" value="test" />

还有 javascript 代码。

var btn = document.getElementsByTagName('input')[0];
var i = true;

btn.addEventListener('click', function() 
    if (i == true)
        i = false;
    else
        i = true;
);

【参考方案3】：

为点击做一个计数器

var countClick= 0

if (countClick== 1) 
        //do the first click code
    
    if (countClick== 2) 
        //do the second click code
    

【参考方案4】：

您可以简单地将函数调用与onclick 事件相关联，然后切换boolean 值：

var i = true;
function clicked () 
  //toggle the value
  i = !i; 
  console.log(i);

<input type="button" value="test" onclick="clicked();" />

【参考方案5】：

这是一个可以做你想做的事的 sn-p。您可以让它永远切换，也可以像您的示例一样只切换一次。

var buttonClicks = 0;
var boolValue = true;
var boolValueOutput = document.getElementById("boolValue")

boolValueOutput.innerHTML = boolValue;

function onButtonClick()

  buttonClicks++;

  // If you want it to only work once uncomment this
  //if (buttonClicks > 2)
  //  return;
  
  boolValue = !boolValue;
  boolValueOutput.innerHTML = boolValue;

<input type="button" value="test" onclick="onButtonClick();" />
<p id="boolValue"></p>