This is my first SO post, please let me know how to do better!

I have a function that clears the by setting the opacity to 0, it works, but it will make my file massive if if try to set up a whole spread sheet with each having the same function bar different ids,

Ideally, the way I want this to play out, is that clears itself, and will clear all blocks. And I want to do it without having to write duplicate functions.

Is it possible to have a function set over classes? I have tried with no success
Or is there a better way to run the JavaScript, like somehow onclick==clear.self ?

function Xf1() {
  f1();
  f2();
}

function f1() {
  var element = document.getElementById("a1");
  element.style.opacity = "0";
}

function f2() {
  var element = document.getElementById("a2");
  element.style.opacity = "0";

<tr>
  <th onclick="Xf1()">Clear all</th>
</tr>

<tr>
  <td onclick="f1()" id="a1"> text1</td>
  <td onclick="f2()" id="a2"> text2</td>
</tr>

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

CodePudding user response：

You can use event delegation

1. start by adding a class to the table element
2. add a class to the "clear all" heading
3. add a click event listener to the table element

If the click event target is a td element, set its opacity to 0.

If the click target is the clear all heading, set all td elements to opacity 0. You can do that by querying the table for td tags and then using forEach to change the opacity for each of them.

const myTable = document.body.querySelector(".my-table");

myTable.addEventListener("click", event => {
  const target = event.target;
  if (target.tagName == "TD") {
    target.style.opacity = 0;
  }
  if (target.classList.contains("clear-all")) {
    myTable.querySelectorAll("td").forEach(item => (item.style.opacity = 0));
  }
});

<table class="my-table">
  <thead>
    <th class="clear-all">Clear all</th>
  </thead>
  <tbody>
    <tr>
      <td id="a1">text1</td>
      <td id="a2">text2</td>
    </tr>
  </tbody>
</table>

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

CodePudding user response：

set an id to parent tag then set onclick to that elements children.

if you set "container" as id you will have something like this:

var elements = document.getElementById("container");

for (let i = 0; i < elements.children.length; i  ) {
  elements.children[i].onclick = function () {
    elements.children[i].style.opacity = "0";
  };
}

CodePudding user response：

Instead of adding onclick to each td element. Have it in table element. Like this

    
    document.querySelector("#table").addEventListener("click", (event)=>{
      if(event.target.dataset.type==='clear'){
        const ids = ['a1', 'a2'];
        ids.forEach((ele)=>{
         document.querySelector(`#${ele}`).style.opacity = '0';
        });
        return;
      }
      event.target.style.opacity = "0";
    }
    )

<table id="table">
  <tr>
    <th data-type="clear">Clear all</th>
  </tr>

  <tr id="tableRows">
    <td id="a1"> text1</td>
    <td id="a2"> text2</td>
  </tr>
</table>

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