Как применить функцию с параметрами к разным объектам?

Question

У меня есть два одинаковых объекта, но они не работают с одной функцией. Я решила подставить другие классы, представив, что это разные объекты. Но это не сработало.

Закомменченный код не работал с двумя объектами, поэтому я написала то, что следует за ним, но это выдает ошибку, ссылаясь на эту строчку

self.input.value = self.input.value += emoji;

Я не понимаю, что за ошибка.

function smilesInsertion(emojiElementArray, inputField) {
  this.emojies = Array.from(emojiElementArray);
  this.input = inputField;
  this.emojies.forEach(emoji => {
    emoji.addEventListener('click', insertEmoji)
  })

  function insertEmoji() {
    let emoji = this.innerText;
    self.input.value = self.input.value += emoji;
  }
}

// smilesInsertion(
//     document.querySelectorAll('.smiles-icons-war span'),
//     document.querySelector('.chat-textarea')
//)

try {
  let smilesInsertionE = document.querySelectorAll('.smiles-icons-war span')
  let smilesInsertionTr = document.querySelector('.chat-textarea')
  new smilesInsertion(smilesInsertionE, smilesInsertionTr)
} catch (e) {
  console.log(e)
}

try {
  let smilesInsertionEe = document.querySelectorAll('.smiles-icons-war_rr span')
  let smilesInsertionTer = document.querySelector('.chat-textarea_rr')
  new smilesInsertion(smilesInsertionEe, smilesInsertionTer)
} catch (e) {
  console.log(e)
}

.d-flex {
  display: flex;
}

<div class="d-flex">
  <div>
    <textarea name="text" class="chat-textarea" placeholder="Напишите свой вопрос.."></textarea>
    <div class="smiles-icons-war">
      <span>a</span>
      <br>
      <span>b</span>
      <br>
      <span>c</span>
      <br>
      <span>d</span>
      <br>
      <span>i</span>
      <br>
      <span>f</span>
    </div>
  </div>
  <div>
    <textarea name="text" class="chat-textarea_rr" placeholder="Напишите свой вопрос.."></textarea>
    <div class="smiles-icons-war_rr">
      <span>h</span>
      <br>
      <span>j</span>
      <br>
      <span>k</span>
    </div>
  </div>
</div>

Answer 1

function insertSmiles(chat) {
  const textarea = chat.querySelector('.chat-textarea');
  const spans = chat.querySelectorAll('.smiles-icons-war span');
  
  const emojiesSpan = Array.from(spans);

  emojiesSpan.forEach(item => {
    item.addEventListener('click', (event) => {
      textarea.value += event.target.innerHTML;
    });
  });
}

const chat1 = document.querySelector('.item-chat.item-chat1');
const chat2 = document.querySelector('.item-chat.item-chat2');

insertSmiles(chat1);
insertSmiles(chat2);

.d-flex {
  display: flex;
}

.smiles-icons-war {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 20px;
  user-select: none;
}

.smiles-icons-war span {
  cursor: pointer;
  background-color: transparent;
  padding: 5px;
  border: 1px solid black;
  transition: background-color 0.2s ease-in-out;
}

.smiles-icons-war span:hover {
  background-color: yellow;
}

.smiles-icons-war span+span {
  margin-top: 10px;
}

<div class="d-flex">
  <div class="item-chat item-chat1">
    <textarea name="text" class="chat-textarea" placeholder="Напишите свой вопрос.."></textarea>
    <div class="smiles-icons-war">
      <span>a</span>
      <span>b</span>
      <span>c</span>
      <span>d</span>
      <span>i</span>
      <span>f</span>
    </div>

  </div>

  <div class="item-chat item-chat2">
    <textarea name="text" class="chat-textarea" placeholder="Напишите свой вопрос.."></textarea>
    <div class="smiles-icons-war">
      <span>h</span>
      <span>j</span>
      <span>k</span>
    </div>

  </div>
</div>

БЛОГ НА HUSL

Как применить функцию с параметрами к разным объектам?

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