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

您可以完成以下using 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>

如果您将诺言链放入async function并使用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

单击按钮时，其单击事件侦听器（this）中的changeColor将是您刚刚单击的按钮的上下文，因此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);

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

4 个答案: