Я хочу объединить 2 массива с Javascript

#javascript #arrays #combinations

#javascript #массивы #комбинации

Вопрос:

Это HTML из двух массивов. Мне нужно нажать ul.слева и справа. (пример — 1 amp; a, 1 amp; c, 2 amp; b …) Когда я нажимаю на левый массив и правый массив, мне нужно получить комбинацию влево / вправо в div.input.

 <ul class="left">
  <li><button>1</button></li>
  <li><button>2</button></li>
  <li><button>3</button></li>
</ul>

<ul class="right">
  <li><button>a</button></li>
  <li><button>b</button></li>
  <li><button>c</button></li>
</ul>

<div class="input"> </div>

Javascript:

 const arrayRight = document.querySelectorAll('.right li');
const arrayLeft = document.querySelectorAll('.left li');
const input = document.getElementsByClassName('input');
Array.from(arrayRight).addEventListener('click', el => {
  Array.from(arrayLeft).addEventListener('click', ele => {
    input.appendChild(span);
    span.textContent = '${ele.innerText} / ${el.innerText}';
  });
});

1. Пожалуйста, добавьте свой код. Итак, мы можем вам помочь

2. Вам также нужно будет показать свой код Javascript.

3. @Link const arrayRight = document . querySelectorAll(.right li); const arrayLeft = document . querySelectorAll(.left li); const input = document.getElementsByClassName(‘input’); Array.from(arrayRight).addEventListener(‘click’, el => { Array.from(arrayLeft).addEventListener(‘click’, ele => { const span= document.createElement(span); input.appendChild(span); span.textContent = ‘${ele.innerText} / $ {el.innerText}’; … }); });

4. Пожалуйста, добавьте такие детали к самому вопросу в будущем, поскольку любому, кто хочет помочь, потребуются эти детали, чтобы понять проблему. Я решил это, пожалуйста, проверьте мой ответ.

5. @Link я попробую. Большое спасибо.

Ответ №1:

Вот как вы можете это сделать. документ.querySelectorAll возвращает список узлов, если вы хотите добавить прослушиватели событий, вам нужно выполнить цикл по этому списку узлов, используя forEach или аналогичный цикл (для …of, классический для и т.д.)

 const arrayRight = document.querySelectorAll('.right li');
const arrayLeft = document.querySelectorAll('.left li');
const input = document.querySelector('.input');

arrayLeft.forEach((element, index) => {
  element.addEventListener('click', () => {
    input.innerHTML = `<span>${element.textContent} / ${arrayRight[index].textContent}</span>`;
  });
});

arrayRight.forEach((element, index) => {
  element.addEventListener('click', () => {
    input.innerHTML = `<span>${arrayLeft[index].textContent} / ${element.textContent}  </span>`;
  });
});

       <ul class="left">
        <li><button>1</button></li>
        <li><button>2</button></li>
        <li><button>3</button></li>
      </ul>

      <ul class="right">
        <li><button>a</button></li>
        <li><button>b</button></li>
        <li><button>c</button></li>
      </ul>

      <div class="input"></div>

1. Кроме того, никогда не добавляйте прослушиватель событий внутри другого прослушивателя событий, потому что, если вы это сделаете, ваш внутренний прослушиватель событий будет работать только после того, как вы нажмете на элемент внешнего прослушивателя событий. Итак, если вы не хотите такого поведения, вам следует убедиться, что прослушиватели событий не вложены.