Получить свойство объекта, название которого соответствует id элемента html на который я кликаю

Question

Есть несколько элементов с классом "booster" с разными значениями атрибута id, так же есть объект в js для каждого элемента (на скриншоте пример объекта).

При клике на такой элемент я хочу брать его уникальный id и выводить в консоль свойство объекта. Этот самый id и название объекта имеют одинаковое значение.

У меня получилось подобрать id, но свойство - нет. "indefined"

Answer 1

const boosterNode = document.querySelectorAll('.booster');
const result = document.querySelector('.result');
const boosterArray = [{
    name: 'booster1',
    id: 1
  },
  {
    name: 'booster2_DANGER',
    id: 2
  },
  {
    name: 'booster3',
    id: 3
  }
];
boosterNode.forEach((item) => {
  item.addEventListener('click', (e) => {
    result.innerHTML = '';
    const myObj = boosterArray.find((_item) => _item.name === item.id);
    if (myObj !== undefined) {
      for (let key in myObj) {
        result.innerHTML += key + ': ' + myObj[key] + '<br>';
      }
    } else {
      result.innerHTML = '<div class="danger">ОШИБКА!</div>';
    }

  });
});

.booster {
  background-color: black;
  width: 50px;
  height: 50px;
  margin-top: 10px;
}

.danger {
  font-size: 70px;
  animation: anime 0.5s ease-in-out;
  transform-origin: center center;
  display: inline-block;
  color: red;
}

@keyframes anime {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

<div class="booster" id="booster1"></div>
<div class="booster" id="booster2"></div>
<div class="booster" id="booster3"></div>
<div class="result"></div>

БЛОГ НА HUSL

Получить свойство объекта, название которого соответствует id элемента html на который я кликаю

Ответы (1 шт):