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

仅当两个按钮都被单击时，我才想将我的box1的背景色更改为红色

HTML:

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

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

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

试试这个

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

编辑：在按钮上添加事件侦听器，而不是单击按钮

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

编辑：在按钮上添加事件监听器，而不是单击按钮上的事件监听器

每当单击按钮时，如果以前没有单击过，请将其添加到列表中

clickedButtons[]

添加按钮时，检查两个按钮是否都在列表中，如果都在列表中，则切换css类并清空列表，这样整个过程就可以重新开始。下次单击两个按钮时，颜色将恢复为初始颜色

const clicked按钮=[]；
[b1，b2].forEach（btn=>btn.addEventListener（'click'，（e）=>{
if（clickedButtons.includes（e.target））return；//之前单击过按钮
点击按钮。按下（如目标）；
如果（[b1，b2]。每（b=>clickedButtons.includes（b）））{
box1.classList.toggle（'red'）；
clickedButtons.length=0；//清空列表，以便重新开始
}
}))

#框1{
宽度：150px；
高度：150像素；
背景颜色：蓝色；
}
#方框1.1红色{
背景色：红色；
}

klick我
克利克我

给你

每当单击按钮时，如果以前没有单击过，请将其添加到列表中

clickedButtons[]

添加按钮时，检查两个按钮是否都在列表中，如果都在列表中，则切换css类并清空列表，这样整个过程就可以重新开始。下次单击两个按钮时，颜色将恢复为初始颜色

const clicked按钮=[]；
[b1，b2].forEach（btn=>btn.addEventListener（'click'，（e）=>{
if（clickedButtons.includes（e.target））return；//之前单击过按钮
点击按钮。按下（如目标）；
如果（[b1，b2]。每（b=>clickedButtons.includes（b）））{
box1.classList.toggle（'red'）；
clickedButtons.length=0；//清空列表，以便重新开始
}
}))

#框1{
宽度：150px；
高度：150像素；
背景颜色：蓝色；
}
#方框1.1红色{
背景色：红色；
}

klick我
克利克我

您可以完成以下任务：

函数一次（处理程序）{
返回函数1（{type}）{
此.removeEventListener（类型，1）
返回处理程序.apply（此，参数）
}
}
函数（类型、选择器）{
返回新承诺（解决=>{
document.querySelector（选择器）.addEventListener（类型，一次（解析））
})
}
我保证([
当（'点击'，'按钮1'）时，
当（'点击'，'按钮2'）
]).然后（函数（）{
document.querySelector（'.box1'）.classList.toggle（'id2'））
})

.box1{
宽度：150px；
高度：150像素；
背景颜色：蓝色；
}
.id2{
背景色：红色；
}

点击我
点击我

您可以完成以下任务：

函数一次（处理程序）{
返回函数1（{type}）{
此.removeEventListener（类型，1）
返回处理程序.apply（此，参数）
}
}
函数（类型、选择器）{
返回新承诺（解决=>{
document.querySelector（选择器）.addEventListener（类型，一次（解析））
})
}
我保证([
当（'点击'，'按钮1'）时，
当（'点击'，'按钮2'）
]).然后（函数（）{
document.querySelector（'.box1'）.classList.toggle（'id2'））
})

.box1{
宽度：150px；
高度：150像素；
背景颜色：蓝色；
}
.id2{
背景色：红色；
}

点击我
点击我

当您单击按钮时，其单击事件侦听器（

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

---

单击按钮时，其单击事件侦听器（

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

---

这就像编写

var value=prompt（）；如果（value=='foo'&&value=='bar'）{console.log（'同时等于两个不同的值！！！'）；}

那就像写

var value=prompt（）；如果（value=='foo'&&value=='bar'）{console.log（'同时等于两个不同的值！！！'）；}

我不建议使用内联事件监听器。我不建议使用内联事件监听器。很好的解决方案，我不知道承诺在这里会有帮助。非常优雅！漂亮的解决方案，我不知道承诺在这里会有帮助。非常优雅！