running an onclick command to show a table in chartsJS-CodePudding

I have a table that I can toggle open and closed. It toggles from a button, no problem.

document.getElementById("toggleVisibilityButton").addEventListener("click", function(button) {
   if (document.getElementById("displaytable").style.display === "none")
               document.getElementById("displaytable").style.display = "block";
   else document.getElementById("displaytable").style.display = "none";
});

My html

<input id="toggleVisibilityButton" type="button" value="Button1"/>
<table  id="displaytable" style="display:none" width="100%" cellpadding="1" cellspacing="0" border="3">
    <tr align="center">
            <td class="lbl">column1</td>
            <td class="lbl">column2</td>
            <td class="lbl">column3</td>
            </tr>
    <tr>
            <td align="center">1</td>
            <td align="center">2</td>
             <td align="center">33</td>
            </tr>
            <tr>
            <td align="center">4</td>
            <td align="center">5</td>
           <td align="center">6</td>
            </tr>
</table>

What I am trying to do is to use chartsjs so that when a section of the pie chart is clicked, a separate table is toggled open. I can call a JS function using a OnClick command for chartsJS.

onClick: (evt, activeEls) => {
  alert(activeEls[0]._chart.data.labels[activeEls[0]._index]);
},

but when I try and wrap the JS that opens the table in a function and put it into this OnClick command the table does not open when the chart is clicked on. How can I set it up so that when the chart segment is click on that the table will open up. Ideally il be looking to then fill the table with the data of the section of the pie chart that was pressed, but that id like to try and get the table opening first using the OnClick command.

so my full set up that I am trying is:

function show() {
document.getElementById("toggleVisibilityButton").addEventListener("click", function(button) {
       if (document.getElementById("displaytable").style.display === "none")
                   document.getElementById("displaytable").style.display = "block";
       else document.getElementById("displaytable").style.display = "none";
    });
}

Then in my chartjs:

onClick: (evt, activeEls) => {
  show();
  alert(activeEls[0]._chart.data.labels[activeEls[0]._index]);
},

CodePudding user response：

You are reasigning the onclick listener to the button in your show method. You just need to execute the code within it so your show method should be this:

if (document.getElementById("displaytable").style.display === "none") {
  document.getElementById("displaytable").style.display = "block";
} else {
  document.getElementById("displaytable").style.display = "none";
}

And you will need to target the correct table since you want to target a different table. But now since you get the same ID it will open and close the table you also open/close with the button