单击 2 次时背景颜色发生变化

Question

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

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

Answer 1

您可以将点击次数存储在变量中，并向按钮添加一个 click 事件侦听器，使计数器递增并检查它是否为 2，如果是，则设置背景body.

的颜色

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

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

Answer 2

改用onDblClick：

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

Answer 3

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

Answer 4

类似于@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>

单击 2 次时背景颜色发生变化

background color change when clicked 2x

html

javascript

css

onclick

button