20
Июл
2021

Ограничения переменных в JS?

Здоровья вам. Как говорится ...я только учусь... И возможно (даже наверняка) вопрос дурацкий. Но я как то не могу сам докумекать/найти. Расскажу на примере:

const onMouseEnter = (target) => {
  target.style.opacity = 1;
};

const onMouseLeave = (target) => {
  target.style.opacity = 0;
};



['block1', 'block2'].forEach((id) => {
  const node = document.getElementById(id);
  const target = document.getElementById(node.dataset.targetId);

  node.addEventListener('mouseenter', () => onMouseEnter(target));
  node.addEventListener('mouseleave', () => onMouseLeave(target));
});
body {
  background-color: #242424;
  background-image: url();
}

p {
  color: #f4f4f4;
  font-size: medium;
  font-weight: 700;
  text-shadow: (2 2 0 2 black);
  text-transform: capitalize;
  margin: 0.4em;
}

div {
  display: flex;
  width: 4em;
  height: 4em;
  position: fixed;
  margin: 1em;
}

#block1,
#block2 {
  cursor: pointer;
  border: ridge;
  border-color: grey;
}

#block1 {
  background: cyan;
  top: 1em;
  left: 4em;
}

#block2 {
  background: green;
  top: 6em;
  left: 4em;
}

#block3 {
  background: darkcyan;
  top: 1em;
  left: 9em;
  opacity: 0;
}

#block4 {
  background: darkgreen;
  top: 6em;
  left: 9em;
  opacity: 0;
}
<div>
  <div id="block1" data-target-id="block3">
    <p>
      block1
    </p>
  </div>
</div>
<div>
  <div id="block2" data-target-id="block4">
    <p>
      block2
    </p>
  </div>
</div>
<div id="block3">
  <p>
    block3
  </p>
</div>
<div>
  <div>
    <div id="block4">
      <p>
        block4
      </p>
    </div>
  </div>
</div>

Существуют ли в JS, какие ограничение на количество id в квадратных скобках ['block1', 'block2'].forEach((id) => . У меня когда добавляешь их более 20 шт. Часть из них перестают работать. Все запитые и кавычки соблюдаю. И если это ограничение как мне решить задачу?

Спасибо.

Источник: https://ru.stackoverflow.com/questions/1307079/%D0%9E%D0%B3%D1%80%D0%B0%D0%BD%D0%B8%D1%87%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BF%D0%B5%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%BD%D1%8B%D1%85-%D0%B2-js

Тебе может это понравится...

Добавить комментарий