Создание стиля для клика

Question

применение класса к элементу только при нажатии

Answer 1

Вы можете сделать 2 разные функции клика. Один для ловушки и один для остальных.

Для этого вам нужно знать, какие из них другие (безопасные). См. otherDivsIds в приведенном ниже коде. Вы находите другие id's, используя функцию фильтра в idArray, а затем через них l oop (с forEach или чем-то еще) и добавляете прослушиватели событий к каждому из них.

Я бы также предложил поменять местами имена переменных trapBox и trapId. Наоборот было бы лучше

См. Код ниже

var idArray = ['one','two','three','four'];
var trapBox = idArray[Math.floor(Math.random() * idArray.length)];
var trapId= document.getElementById(trapBox);

trapId.addEventListener('click', boomClickFunction, false);
var otherDivsIds = idArray.filter(id => id !== trapBox);
otherDivsIds.forEach(id => {
	safeBox =  document.getElementById(id);
  safeBox.addEventListener('click', safeClickFunction, false)
})


var timeoutId = window.setTimeout(ticker, 5000);
function ticker() {
  document.getElementById('timesUp').innerHTML = "Time's up!";
  document.body.style.backgroundColor = "black";
} 


function boomClickFunction() {
	this.classList.add('boom')

}
function safeClickFunction() {
	this.classList.add('safe')
}

 div {
   width: 20px;
   height: 20px;
   background-color: green;
   margin: 20px;
   float: left;
 }

 .boom {
   background-color: red;
 }

 .safe {
   background-color: lightblue;
 }

 #timesUp {
   color: white;
 }

<div id='one'>

</div>
<div id='two'>

</div>
<div id='three'>

</div>
<div id='four'>

</div>
<span id="timesUp">

</span>

Answer 2

Вы можете добавить класс к элементу, используя classList.add('classToBeAdded').

В вашем случае вы можете поместить его в свой clickFunction:

trapId.classList.add('boom');