僅在單擊兩個按鈕時如何操作元素

Question

我想僅將兩個按鈕都單擊時才將box1的背景色更改為紅色。

HTML：

<button id="button1">klick me</button>
<button id="button2">klick me</button>
<div class="box1"></div>

CSS：

.box1 {
width: 150px;
height: 150px;
background-color: blue;
}
.id2 {
background-color: red;
}

JavaScript的：

function changeColor (){
let button1 = document.querySelector('#button1');
let button2 = document.querySelector('#button2');
let box1 = document.querySelector('.box1');

if(this.id === 'button1'){
box1.classList.toggle('id2');
}     
}

button1.addEventListener('click', changeColor);
button2.addEventListener('click', changeColor);

先前的代碼按預期工作。 如果單擊了button1，則box1的顏色變為紅色。

因此，我在下面的if語句中嘗試執行以下操作，以實現僅在單擊兩個按鈕后才更改顏色：

if(this.id === 'button1' && this.id === 'button2' ){
box1.classList.toggle('id2');
}

但是不幸的是它沒有用。 我想念什么？ 提前致謝！

Answer 1

您可以使用promises完成此操作 ：

 function once (handler) { return function one ({ type }) { this.removeEventListener(type, one) return handler.apply(this, arguments) } } function when (type, selector) { return new Promise(resolve => { document.querySelector(selector).addEventListener(type, once(resolve)) }) } Promise.all([ when('click', '#button1'), when('click', '#button2') ]).then(function () { document.querySelector('.box1').classList.toggle('id2') }) 

 .box1 { width: 150px; height: 150px; background-color: blue; } .id2 { background-color: red; } 

 <button id="button1">click me</button> <button id="button2">click me</button> <div class="box1"></div> 

如果將promise鏈放入異步函數並使用while循環，則可以擴展此方法以反復切換。

 function once (handler) { return function one ({ type }) { this.removeEventListener(type, one) return handler.apply(this, arguments) } } function when (type, selector) { return new Promise(resolve => { document.querySelector(selector).addEventListener(type, once(resolve)) }) } async function toggler () { const box = document.querySelector('.box1') while (true) { await Promise.all([ when('click', '#button1'), when('click', '#button2') ]) box.classList.toggle('id2') } } toggler() 

 .box1 { width: 150px; height: 150px; background-color: blue; } .id2 { background-color: red; } 

 <button id="button1">click me</button> <button id="button2">click me</button> <div class="box1"></div> 

Answer 2

嘗試這個

使用Javascript：

var clicks = {
  button1: false,
  button2: false
}

var box1 = document.querySelector('.box1');
var button1 = document.querySelector('#button1');
var button2 = document.querySelector('#button2');

function clicked(e){
  var btn = this.id;
  clicks[btn] = true;

  if(clicks.button1 && clicks.button2){
    //change color
    box1.classList.toggle('id2');

    // reset object to initial state (if needed)
    clicks = {
      button1: false,
      button2: false
    }
  }
}

button1.addEventListener('click', clicked);
button2.addEventListener('click', clicked);

編輯：在按鈕而不是onclick上添加了事件偵聽器

Answer 3

干得好。

每當單擊按鈕時，如果以前從未單擊過，則將其添加到clickedButtons[]列表中。

添加按鈕后，檢查兩個按鈕是否都在列表中，如果是，請切換css類並清空列表，以便整個過程可以重新開始。 下次單擊兩個按鈕時，顏色將恢復為初始顏色。

 const clickedButtons = []; [b1, b2].forEach(btn => btn.addEventListener('click', (e) => { if (clickedButtons.includes(e.target)) return; // button was clicked before clickedButtons.push(e.target); if ([b1, b2].every(b => clickedButtons.includes(b))) { box1.classList.toggle('red'); clickedButtons.length = 0; // empty the list so we can start over } })) 

 #box1 { width: 150px; height: 150px; background-color: blue; } #box1.red { background-color: red; } 

 <button id="b1" type="button">klick me</button> <button id="b2" type="button">klick me</button> <div id="box1"></div> 

Answer 4

當您單擊一個按鈕時，其click事件監聽器（ changeColor ）中的this將是您剛剛單擊的按鈕的上下文，因此ID只能是一個或另一個，而不是兩者。

您將需要一個狀態對象來跟蹤兩個按鈕，並且當單擊兩個按鈕時，然后執行更改：

let state = {
    button1Clicked: false,
    button2Clicked: false
};

let button1 = document.querySelector('#button1');
let button2 = document.querySelector('#button2');
let box1 = document.querySelector('.box1');

function changeColor () {
    this.id === 'button1'
        ? state.button1Clicked = true
        : state.button2Clicked = true;

    if (state.button1Clicked && state.button2Clicked) {
        box1.classList.toggle('id2');
    }
}

button1.addEventListener('click', changeColor);
button2.addEventListener('click', changeColor);