我想将 2 个数组与 Javascript 结合

Question

This is HTML of two array. I need to click ul.left and ul.right. (example- 1&a, 1&c, 2&b ...) When I click the left array and the right array, I need to get the left/right combination in the 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}';
  });
});

Answer 1

This is how you can do it. document.querySelectorAll returns a node list, if you want to add event listeners, you need to loop through that nodelist using forEach or a similar loop (for...of, classic for etc.)

 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>