Проверка нажатия на одну и ту же ячейку

Question

Есть таблица с данными в которой нужно нажать на две ячейки, нажать на одну и ту ячейку нельзя. Как это проверить?

    let x = undefined; 
    let y = undefined;

    let tab1 = document.getElementById("table");
    let tab2 = document.getElementById("table2");
    
    function clickCellTab1() {
        for(var i = 0; i < tab1.rows.length; i++){
            for(var j = 0; j < tab1.rows[i].cells.length; j++){
                tab1.rows[i].cells[j].onclick = function() {
                    if (x === undefined) {
                        x = this.innerHTML;
                        this.style.backgroundColor = "#0069ff";
                    } else if (y === undefined){
                        
                        y = this.innerHTML;
                        this.style.backgroundColor = "#00faff";
                      
                  }
                }
            }

        }
    }

HTML

<table id="table" class ="tb1" border="1">
<tr><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td></tr>
</table>

Answer 1

let targets = {
  x: {
    color: '#0069ff',
    isActive: false
  },
  y: {
    color: '#00faff',
    isActive: false
  }
};

let tab1 = document.getElementById("table");
let tab2 = document.getElementById("table2");

for(var i = 0; i < tab1.rows.length; i++){
  for(var j = 0; j < tab1.rows[i].cells.length; j++){
    tab1.rows[i].cells[j].onclick = function() {
      
      if (this.dataset.active || null) {
        let target = targets[this.dataset.target] || null;
        if (target) {
          target.isActive = false;
          delete this.dataset.active;
          this.style.backgroundColor = null;
          return;
        }
      }
      
      for (let name in targets) {
        if (!targets[name].isActive) {
          this.style.backgroundColor = targets[name].color;
          this.dataset.active = true;
          this.dataset.target = name;
          targets[name].isActive = true;
          break;
        }
      }
    }
  }
}

<table id="table" class ="tb1" border="1">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
   </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
   </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
   </tr>
</table>

Answer 2

    let td = document.querySelectorAll("td");
    
    td.forEach(function(elem){
        elem.onclick = ()=> clickTd(elem)
    })
    function clickTd(el){
    if (el.classList.contains('active')) 
    el.classList.remove('active','green','blue')
    else if (document.querySelectorAll("td.active").length < 1) el.classList.add('active','green')
    else if (document.querySelectorAll("td.active").length < 2) el.classList.add('active','blue')
    }

td {
  width: 50px;
  height: 30px;
  cursor: pointer;
}

td.active.green {
  background: green;
}

td.active.blue {
  background: blue;
}

<table id="table" class ="tb1" border="1">
<tr><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td></tr>
<tr><td> </td><td> </td><td> </td></tr>
</table>

БЛОГ НА HUSL

Проверка нажатия на одну и ту же ячейку

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