I am using chartJS to show a chart. In my chart I am using the onClick function to run JS commands when the chart is clicked. The chartJS lives in my Html template in a script. What I want to do is set it up so that if a global variable is of null value then a html table will hide itself. My problem is that I need to reload I want to store this hide table code in a function, however, when I put it in a function format it does not work. In order for it to run I seem to have to have it placed in separate tag not in a function format. I don’t know why this is, I am already calling other JS function when the chart is clicked and they work fine. The problem arises because I need to reload the page (for different reasons). As I reload the page the global variable is again set to zero.

This code run the function.

onClick: (evt, activeEls, chart) => {
    global_var = chart.data.labels[activeEls[0].index];
    calling_label();
    document.location.reload(true); //reload the full page.
    Hide_table();
},



<script>
function Hide_table (){
    if (global_var == null){
    document.getElementById("mytable").style.display = "none";
    }
}
</script>

Now if I put the hide table if not in a function then the table is hidden, however because I need to reload the page the page the global_var is always null so the table will never show.

onClick: (evt, activeEls, chart) => {
    global_var = chart.data.labels[activeEls[0].index];
    calling_label();
    document.location.reload(true); //reload the full page.
},



<script>
if (global_var == null){
    document.getElementById("mytable").style.display = "none";
    }
</script>