问嗨，我正在尝试在我的页面上复制一个具有不同元素的事件侦听器，将不同的元素与不同的键配对

EN

const input = document.querySelector('input');

document.addEventListener('keydown', logKey);

function logKey(e) {
  if(e.code == 'KeyB') {
    var tag = document.querySelector('.batman');
    tag.classList.toggle('active');
    
    console.log('B clicked')
  }
  
  if (e.code == 'KeyS') {
    var tag = document.querySelector('.spiderman');
    tag.classList.toggle('active');
  
    console.log('S clicked')
  }
}

body {display:flex; flex-flow:row wrap; align-items:center; justify-content:center; background:#333 url(https://images.unsplash.com/photo-1475862013929-0af29a1197f4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2534&q=80) fixed 50% 50%/ cover; }
.holo {margin:0 10px 20px 10px; xwidth:300px; xheight:200px; border:5px solid rgba(0,100,200,0.5); border-radius:20px;  text-align:center; color:rgba(0,100,200,0.9); background:rgba(0,0,0,0.7); transform:scale(1.0);}

.holo:hover, .holo.active {background:rgba(30,30,30,0.8); transition-duration:0.5s; transform:scale(1.1);}


.holo h1 {font:bold 30px Arial; text-transform:uppercase;}
.holo img {width:100%; width:300px; margin:10px; border-radius:20px;}

<div class="holo batman">
  <h1>Batman</h1>
  <img src="https://images.unsplash.com/photo-1509347528160-9a9e33742cdb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>

<div class="holo spiderman">
  <h1>Spiderman</h1>
    <img src="https://images.unsplash.com/photo-1521714161819-15534968fc5f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
</div>
<div class="holo ironman">
  <h1>Iron Man</h1>
  <img src="https://images.unsplash.com/photo-1509817445409-e2057fd6feac?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
  
</div>

<div class="holo thor">
  <h1>Thor</h1>
   <img src="https://images.unsplash.com/photo-1495044245703-b07f266e47b4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80">
  
</div>

<div class="holo spiderman2">
  <h1>Spiderman 2</h1>
  <img src="https://images.unsplash.com/photo-1505925456693-124134d66749?ixlib=rb-1.2.1&auto=format&fit=crop&w=2550&q=80">
  
</div>
<div class="holo darkknight">
  <h1>The Dark Knight</h1>
  <img src="https://images.unsplash.com/photo-1519740296995-10d3d8267019?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
  
</div>
<div class="holo avengers">
  <h1>Avengers</h1>
  <img src="https://images.unsplash.com/photo-1471877325906-aee7c2240b5f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
  
</div>

<div class="holo wonderwoman">
  <h1>WonderWoman</h1>
  <img src="https://images.unsplash.com/photo-1517242296655-0a451dd85b30?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
  
</div>
<div class="holo spiderman3">
  <h1>Spiderman 3</h1>
  <img src="https://images.unsplash.com/photo-1534375971785-5c1826f739d8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80">
  
</div>