Is there like a clickcounter function that records the amount of clicks you do on an element in JavaScript?

Question

Currently I have a table and a JavaScript function that makes it so that when I click an table cell all the other table cells in the row disappear and the clickedcell gets moved to the leftmost of the table row, there will be info sliding out from the right and etc. However I want to make it so that when you click it a second time everything returns back to their normal state.

I'm just wondering if JavaScript can track how many times the user click on an element, I'm thinking of doing something like at odd number of clicks on an element the codes will hide the other table cells and move it while at even number of clicks it returns everything back to normal.

html

<table id='TrendGames'>
    <tbody>
        <tr>
                <td id="cell1"> Cell 1
                <img class='GameCover' src='.png' alt="cell1" />
                </td>
                <td id="cell2">Cell 2
                <img class='GameCover' src='.png' alt="cell2" />
                </td>
                <td id="cell31">Cell 3
                <img class='GameCover' src='.png' alt="cell3" />
                </td>
                <td id="cell4">Cell 4
                <img class='GameCover' src='.png' alt="cell4" />
                </td>
        </tr>
       </tbody>
</table>

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  var table = document.getElementById('TrendGames');
  table.addEventListener('click', function(event) {
    var clickedCell = event.target.closest('td');
    if (clickedCell) {
      handleCellClick(clickedCell);
    }
  });
});

function handleCellClick(clickedCell) {
  var row = clickedCell.parentElement;
  var cells = row.children;

  // Hide other cells and rearrange the clicked cell
  for (var i = 0; i < cells.length; i++) {
    if (cells[i] !== clickedCell) {
      cells[i].style.display = 'none';
    }
  }
  row.insertBefore(clickedCell, row.firstChild); // Move to the leftmost
  clickedCell.colSpan = cells.length
  // Open the slider and display information
  openSlider(clickedCell);
}

function openSlider(cell) {
  // Implement the slider logic here
  console.log(cell.id)
}

The odd and even clickcounters are just my thoughts on how I might do it I don't know if that's possible yet so if it's possible or there's a better approach on doing the return-to-normal state function pls let me know.

Answer 1

You don't need a counter. As you have modified the row in a specific way, you can see on the next click it is in that peculiar state, so you know you have to reverse the action.

I would not move the clicked cell, but copy it. Otherwise you don't know where to move it back to later.

When you detect that the last cell in the clicked row is hidden, you know you need to revert the action, which means to show all cells in that row again, and to remove the first one.

Here is an implementation:

document.addEventListener('DOMContentLoaded', function() {
  var table = document.getElementById('TrendGames');
  table.addEventListener('click', function(event) {
    var clickedCell = event.target.closest('td');
    if (clickedCell) {
      handleCellClick(clickedCell);
    }
  });
});

function handleCellClick(clickedCell) {
  const row = clickedCell.parentElement;
  const cells = row.children;
  const display = cells[cells.length - 1].style.display ? '' : 'none';

  // Hide/Show all cells
  for (var i = 0; i < cells.length; i++) {
    cells[i].style.display = display;
  }
  if (display) { // First click (third, fifth, ...)
    // Copy(!) the clicked cell in the leftmost position
    const newCell = clickedCell.cloneNode(true);
    newCell.style.display = '';
    newCell.colSpan = cells.length;
    row.insertBefore(newCell, row.firstChild);
    // Open the slider and display information
    openSlider(newCell);
  } else {
    // Remove the cell that was inserted on previous click
    clickedCell.remove();
    closeSlider(clickedCell);
  }
}

function openSlider(cell) {
  // Implement the slider logic here
  console.log(cell.id)
}

function closeSlider(cell) {
  // Implement the slider logic here
  console.log(cell.id)
}

<table border=1 id='TrendGames'>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
            <td>Cell 4</td>
        </tr>
        <tr>
            <td>Cell 5</td>
            <td>Cell 6</td>
            <td>Cell 7</td>
            <td>Cell 8</td>
        </tr>
       </tbody>
</table>