'Advice to reduce (factor?) 3 similar actions into one

in this card gave I have 3 cards in hand and I want to place one on the board. So far this works well :

var jouerM1J1 = document.querySelector(".j1-main1");
jouerM1J1.addEventListener("click", () => {
  if (pioche1J1 !== null && tourJ1 == true) {
    j1EmplCarteJoue.appendChild(pioche1J1.getHTML())
    j1pli = pioche1J1
    j1main1.innerHTML = '';
    pioche1J1 = null
    cartesPosees++
    tourJ1 = false
    tourJ2 = true
    aquileTour()
    queJouerOrdi()
  }
  if (cartesPosees == 2) {
    comparaison()
  }
});

var jouerM2J1 = document.querySelector(".j1-main2");
jouerM2J1.addEventListener("click", () => {
  if (pioche2J1 !== null && tourJ1 == true) {
    j1EmplCarteJoue.appendChild(pioche2J1.getHTML())
    j1pli = pioche2J1
    j1main2.innerHTML = ''
    pioche2J1 = null
    cartesPosees++
    tourJ1 = false
    tourJ2 = true
    aquileTour()
    queJouerOrdi()
  }
  if (cartesPosees == 2) {
    comparaison()
  }
});

var jouerM3J1 = document.querySelector(".j1-main3");
jouerM3J1.addEventListener("click", () => {
  if (pioche3J1 !== null && tourJ1 == true) {
    j1EmplCarteJoue.appendChild(pioche3J1.getHTML())
    j1pli = pioche3J1
    j1main3.innerHTML = ''
    pioche3J1 = null
    cartesPosees++
    tourJ1 = false
    tourJ2 = true
    aquileTour()
    queJouerOrdi()
  }
  if (cartesPosees == 2) {
    comparaison()
  }
});

As you can see it's redundant. But as a beginner, I don't know much. So I tried to make it work with this, to no avail:

var J1joue = document.querySelector(".mainJoueur");
J1joue.addEventListener("click", () => {
  j1EmplCarteJoue.appendChild(cartejoueJ1.getHTML())
  j1pli = cartejoueJ1

  if (j1main1.innerHTML === j1EmplCarteJoue.innerHTML) {
    j1main1.innerHTML = ''
    pioche1J1 = null
  } else if (j1main2.innerHTML === j1EmplCarteJoue.innerHTML) {
    j1main2.innerHTML = ''
    pioche2J1 = null
  } else {
    j1main3.innerHTML = ''
    pioche3J1 = null
  }
  cartejoueJ1 = null
  cartesPosees++
  tourJ1 = false
  tourJ2 = true
  aquileTour()
  queJouerOrdi()

  if (cartesPosees === 2) {
    comparaison()
  }
});

I get: "Uncaught TypeError: Cannot read properties of undefined (reading 'getHTML') at HTMLDivElement". Can someone help me do better? Cheers!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source