I need a button that can toggle (show/hide) a table. Currently, my code hides the table successfully, but it fails to show the table again when I click the button. It seems like there is an issue with refreshing or redirecting after clicking the button for the second time. I suspect that the file might be lost causing the table not to appear again. Here's the snippet of my code:
class TableCsv {
/**
* @param {HTMLTableElement} root The table element which will display the CSV data.
*/
constructor(root) {
this.root = root;
}
// More class methods here
}
const tableRoot = document.querySelector("#csvRoot");
const csvFileInput = document.querySelector("#csvFileInput");
const tableCsv = new TableCsv(tableRoot);
// Event listener and function for handling table visibility
function hidefunction() {
let x = document.getElementById('csvRoot');
if (x.style.visibility === "hidden") {
x.style.display = "visible";
}
x.style.display = "hidden";
}table {
// CSS styles for the table
}
th {
// CSS styles for table header cells
}
// Additional CSS styles<!DOCTYPE html>
<html lang="en">
<head>
<!-- head elements -->
</head>
<body>
<section class="hero is-fullheight">
<!-- hero section content -->
</section>
<h1 style="text-align: center">
Budgeting made easy
</h1>
<div class="tabs">
<div class="tab-2">
<label for="tab2-1">Budget Tool</label>
<input id="tab2-1" name="tabs-two" type="radio" checked="checked">
<div>
<h2 style="text-align: center">Let's Get Started</h2>
<form action="/">
<div class="btn btn-primary btn-file">
<label for="csvFileInput" style="text-align: left">Select a file:</label>
<input type="file" id="csvFileInput" style="cursor: pointer; padding-bottom: 30px">
<table id="csvRoot"></table>
<button type="submit" onclick="hidefunction()">Hide table</button>
</div>
</form>
</div>
</div>
<!-- More tab content here -->
</div>
<script src="path/to/other/js/files.js"></script>
</body>
</html>