当点击2倍时背景颜色改变

Question

我需要一个按钮，可以改变背景颜色，如果你点击它2x。我该怎么做呢?我只知道怎么点击一下。我的代码实际上是这样的:

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

Answer 1

用onDblClick代替:

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

Answer 2

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

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

<button id="btn"> color </button>

Answer 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>

Answer 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';
}
})