Ceci est HTML de deux tableaux. Je dois cliquer sur ul.left et ul.right. (exemple- 1&a, 1&c, 2&b ...) Lorsque je clique sur le tableau de gauche et le tableau de droite, j'ai besoin d'obtenir la combinaison gauche/droite dans le 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}';
  });
});
-2
HBDIDI 9 nov. 2020 à 13:22

1 réponse

Meilleure réponse

C'est ainsi que vous pouvez le faire. document.querySelectorAll renvoie une liste de nœuds, si vous souhaitez ajouter des écouteurs d'événement, vous devez parcourir cette liste de nœuds en utilisant forEach ou une boucle similaire (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>
0
Link 9 nov. 2020 à 11:49