框显示警报，但我想要其他方法，例如使用if链或开关或使用for循环或使用map运算符

Question

[当您运行我的代码并单击所有三个框时，您会为每个框得到一些警报，但是我想要警报的任何替代代码，就像我的代码中一样，我使用了三次查询选择器，但是我想知道不使用三次查询选择器，但是当我们单击

时，所有框和eventlistener内部仅使用一次if链或循环以显示框警报

我使用查询选择器3次，如果通过使用if链或循环来警告彩色框，则有以下交替显示，下面显示>]

function hi() { //here is using of queryselector but i want this by using of if chain or loop that can show alertness for colored box

  document.querySelector('.green').addEventListener('click', () => {
    alert(`hi i'm a green`)
  })
  document.querySelector('.blue').addEventListener('click', () => {
    alert(`hi i'm a blue`)
  })
  document.querySelector('.orange').addEventListener('click', () => {
    alert(`hi i'm a orange`)
  })

}

hi()
.box {
  width: 600px;
  height: 70px;
  text-align: center;
  font-size: 55px;
  font-weight: bold;
  margin: auto;
  margin-bottom: 50px;
  margin-top: 70px;
  padding-top: 0.6%;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.orange {
  background-color: orange;
}

h1 {
  text-align: center;
  font-size: 55px;
  font-weight: bold;
}
<h1>I'm iron man</h1>
<div class="box green">I'm a green</div>
<div class="box blue">I'm a blue</div>
<div class="box orange">I'm a orange</div>

[当您运行我的代码并单击所有三个框时，您会为每个框得到一些警报，但是我想要任何替代代码来进行警报，就像我的代码中使用了三次查询选择器，但我想知道...

Answer 1

您可以将类box添加到每个div，并且将id

Answer 2

我想您可能正在寻找类似的东西，如果这不是您要找的东西，请告诉我，我将相应地编辑答案：