my question is: How can I make a table cell, for example, change text on click? I tried this:

function randomFunction() {
  document.getElementById("randomId").innerText = "random text"
}

<table>
  <tr>
    <td id="randomId" onclick="randomFunction()">random text</td>
  </tr>
</table>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

but it does the onclick attribute for the entire row.

Is it possible to trigger the function only when I click on the cell ?

CodePudding user response：

Yes it possible. you have pass the context to the function. I put more cells in your table.

function randomFunction(e){
  e.innerText = "HuhU"
    // document.getElementById("randomId").innerText = "random text!"
}

td {
  background: green;
  color:white;
}

<table>
    <tr>
        <td id="randomId" onclick="randomFunction(this)">random text</td>
        <td id="randomId" onclick="randomFunction(this)">random text</td>
        <td id="randomId" onclick="randomFunction(this)">random text</td>      
    </tr>
</table>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>