单击 2 次时背景颜色变化答案

【问题标题】：background color change when clicked 2x单击 2 次时背景颜色变化
【发布时间】：2021-10-27 21:50:52
【问题描述】：

我需要一个可以改变背景颜色的按钮，如果你点击它 2 次。我怎么能做到这一点？，我只知道如何通过 1 次点击来做到这一点。我的代码实际上是这样的：

<button onClick="document.body.style.backgroundColor ='#000';"> color </button>

【问题讨论】：

您的意思是当按钮被“双击”时，例如打开应用程序时或第二次单击时，无论多快？
不管多快
在这种情况下，接受 Spectric 答案。如果您不想分隔 JS 块，请使用：
成功了，很棒

标签： javascript html css button onclick

【解决方案1】：

改用onDblClick：

<button onDblClick="document.body.style.backgroundColor ='#000';"> color </button>

【讨论】：

【解决方案2】：

您可以将点击次数存储在一个变量中，并为按钮添加一个click 事件监听器，该按钮会增加计数器并检查它是否为2，如果是，则设置正文的背景颜色。

var clicks = 0;
btn.addEventListener('click', function(){
  if(++clicks == 2){
    document.body.style.backgroundColor ='#000';
  }
})

&lt;button id="btn"&gt; color &lt;/button&gt;

【讨论】：

【解决方案3】：

类似于@Spectric 的响应，将点击次数存储在一个变量中，并为按钮添加点击事件监听器。

我不知道逻辑是什么。

您可以添加另一个按钮，其想法与放置的按钮相同，但反过来：减去。

const btnEle = document.querySelector(".btn");
const resEle = document.querySelector(".result");
const legendEle =  document.querySelector("#legend");

let clickCount = 0;
btnEle.addEventListener("click", () => {
  clickCount++;
  resEle.innerHTML = "The button has been clicked " + clickCount + " times ";
  
  if (clickCount > 1) {
    document.body.style.backgroundColor ='#000';
    legendEle.style.color = '#1E5128';
  }
});

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
  font-size: 18px;
  font-weight: 500;
  color: blueviolet;
}

<div class="result"></div>
<br />
<button class="btn">CLICK HERE</button>
<h3 id="legend">Click on the above button to check if the button is clicked</h3>

【讨论】：

【解决方案4】：

<input type="button" id="btn" onclick="eventB()">

function eventB() {
  var click = 0;
  btn.addEventListner('click', function() {
  if(++click == 2){
    window.document.body.style.background = '##836fff';
  }
})

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。
此答案是 Spectric 答案的副本，但添加了错误。使用此代码，每次点击都会添加一个新的事件监听器