VegasChickiChicki

const button = document.querySelectorAll('.button')
const item = document.querySelectorAll('.item')

function buttonClick() {
    button.forEach((el, index) => {
      el.addEventListener('click', () => {
          button.forEach(elem => {
            elem.classList.toggle('yellow');
            elem.classList.toggle('red');
          });
          item.forEach((elem, id) => {
            elem.style.display = index === id ? 'block' : 'none';
          })
        });
    })
}

buttonClick();

document.querySelectorAll('input').forEach(function(el){
	el.addEventListener('click',function(){
	   console.log(this.value);
  })
})

//при наведении указателя
document.querySelector('.map').addEventListener('mousemove', (event) => {
    let hoverEffect = document.querySelectorAll('.hover-effect');
    for (let i = 0; i < hoverEffect.length; i++) {
        hoverEffect[i].style.opacity = '0.5';
    }
  event.target.style.opacity = '1';
});

//при убирании указателя
document.querySelector('.map').addEventListener('mouseout', () => {
    let hoverEffect = document.querySelectorAll('.hover-effect');
    for (let i = 0; i < hoverEffect.length; i++) {
        hoverEffect[i].style.opacity = '1';
    }
});

// Создаётся объект promise
let promise = new Promise((resolve, reject) => {
// Тут должна быть ваша функция, из-за которой весь код будет приостановлен

...

//Как только функция завершила свое действие, вызываем следующий метод, который продолжит выполнение кода:

resolve();
});

Задает стилевой идентификатор — уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты. Идентификатор в коде документа должен быть в единственном экземпляре, иными словами, встречаться только один раз.

//внутри функции onclick
if (event.target.classList.contains('нужный класс')){
...
} else { ... }