如何仅在单击两个按钮时操作元素

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

前面的代码按预期工作。如果单击按钮 1，框 1 的颜色将变为红色。

所以我尝试了以下 if 语句来实现只有在单击两个按钮时才更改颜色：

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

但不幸的是，它不起作用。我错过了什么？提前感谢！

Answer 1

您可以使用 promise 来实现此目的：

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

单击按钮时，其单击事件侦听器 （ 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);

Answer 4

你去吧。

每当单击按钮

时，如果以前未单击过，请将其添加到列表中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>