Блог

Главная - Вопросы по программированию - Выполнение разных команд для каждой кнопки в одном и том же списке узлов в JavaScript

Выполнение разных команд для каждой кнопки в одном и том же списке узлов в JavaScript

#javascript #html #dom #dom-events #nodelist

#javascript #HTML #dom #dom-события #список узлов

Вопрос:

Может кто-нибудь, пожалуйста, помочь мне здесь

 const buttons = document.querySelectorAll('button');

for (const button of buttons) {
  console.log(buttons[0].value);

  button.onmouseenter = () => {
    console.log(buttons);

    const drop = document.createElement('div');
    const pe = (p) => {
      const text = document.createElement('p');
      text.innerText = p;
      drop.appendChild(text);
    }
    pe('comedy and romence');
    pe('mystrey');

    drop.style.width = '190px';
    drop.style.height = '130px';
    drop.style.display = 'grid';
    drop.style.placeItems = 'center';
    drop.style.border = '0px';
    drop.style.borderRadius = '25px';
    drop.style.backgroundColor = 'rgba(0, 200, 157, 0.2)';
    drop.style.animation = 'move 300ms ease-in-out forwards';

    button.appendChild(drop);
    button.onmouseleave = () => {
      button.removeChild(drop);
    }
  }
}

Я пытаюсь сделать так, чтобы каждый div имел свое собственное текстовое значение, например, у первого есть «comedy and romence», а у второго — «mystrey».

Как я могу это сделать?

Комментарии:

1. для начала, ваш button.onmouseleave button.onmouseenter

2. @MisterJojo В этом случае это действительно может быть хорошо. Он должен быть заменен при следующем наведении курсора мыши.

3. Как вы собираетесь решить, какая кнопка отображает какой текст? Это значение кнопки? В этом случае вызывайте pe(button.value) вместо вызова pe со всеми возможными значениями.

4. спасибо, это сработало @Bergi