Javascript Question posted in
A very good W3school tutorial can be found here.

Can you make the function's name a string plus a variable on javascript?

I currently have a javascript function that acts on a table. When you click on a table cell in a table row all the other cells disappear and the clicked cell gets moved to the leftmost of the table row and there will be a slider opening up on the right side of the table cell. I want to make each table cell’s slider unique so I’m just wondering if there’s a way to make a function’s name a string plus a variable. For example if the clicked cell has a id of cell1 can I do something like let id = the id of the table cell and when I’m doing the function for the slider I name it ‘slider’ + id?

js


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

  for (let i = 0; i < cells.length; i++) {
    cells[i].style.display = display;
  }
  if (display) { 
    const newCell = clickedCell.cloneNode(true);
    newCell.style.display = '';
    newCell.colSpan = cells.length;
    row.insertBefore(newCell, row.firstChild);
    openSlider(newCell);
  } else {
    clickedCell.remove();
    closeSlider(clickedCell);
  }
}

HTML

<table id='TrendGames'>
        <tbody>
            <tr>
                <td id="cell1">
                <img class='GameCover' src='.png' alt="cell1" />
                </td>
                <td id="cell2">
                <img class='GameCover' src='.png' alt="cell2" />
                </td>
                <td id="cell3">
                <img class='GameCover' src='.png' alt="cell3" />
                </td>
                <td id="cell4">
                <img class='GameCover' src='.png' alt="cell4" />
                </td>
            </tr>
       </tbody>
</table>

Any help is appreciated!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Ok I worked it out by pulling out the OpenSlider function and defining each unique slider there.

    function openSlider(cell) {
  let WhichSlider = cell.id;
  if (WhichSlider === 'cell1') {
    slider1(cell);
  } else if (WhichSlider === 'cell2') {
      slider2(cell);
  }
}

  2. 0

    Have you tried using "this" as parameter for your function ?

    HTML

    <table id='TrendGames'>
  <tbody>
    <tr>
      <td id="cell1" onclick="handleCellClick(this)">
        <img class='GameCover' src='BD.png' alt="cell1" />
      </td>
      <td id="cell2" onclick="handleCellClick(this)">
        <img class='GameCover' src='BD.png' alt="cell2" />
      </td>
      <td id="cell3" onclick="handleCellClick(this)">
        <img class='GameCover' src='BD.png' alt="cell3" />
      </td>
      <td id="cell4" onclick="handleCellClick(this)">
        <img class='GameCover' src='BD.png' alt="cell4" />
      </td>
    </tr>
  </tbody>
</table>

    SCRIPT

    function handleCellClick(clickedCell) {
  console.log(clickedCell.id+" is clicked") // logs id of td element
  let myPics = document.getElementsByClassName('GameCover');
  for (const iterator of myPics) {
    iterator.style.display='none';
  }
  clickedCell.childNodes[1].style = "display :'block'";
  const newCell1 = clickedCell.cloneNode(true);
  const newCell2 = clickedCell.cloneNode(true);
  newCell1.id=`firstcol_${clickedCell.id}`;
  newCell2.id=`secondcol_${clickedCell.id}`;
  const myTR = document.createElement("tr");
  clickedCell.childNodes[1].remove()
  myTR.appendChild(newCell1)
  myTR.appendChild(newCell2)
  clickedCell.appendChild(myTR);
}

    I did not understand the logic entirely but using "this" as parameter you can use same function for different elements.

    And yes you can change cloned nodes id whatever you like.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search