In summary: My button in html file #1 is unsuccessfully calling a function attached to html file #2.
In my Taffy DB project, I have these functions in a JavaScript file that will populate the html file it is attached to. Each of these functions will determine which DB fields will populate the html file, writing to an id on the html page with “output.innerHTML+=”
function showGeneral(){
var show = localStorage.setItem('show','General');
getData();
}
function showElectrical(){
var show = localStorage.setItem('show','Electrical');
getData();
}
As a test, “< script>function showGeneral();</ script>” at the bottom of the html page successfully calls the function on load and populates the page.
I have a separate HTML page with buttons that opens the above html page and calls one of the above functions. The code to call the hmtl page and one of the function is:
<button id="toShow">Electrical</button>
<script>
const btn = document.getElementById("toShow");
function toShow(showElectrical){
window.location.assign("pages/general.html");
}
btn.addEventListener('click', toShow);
</script>
The web console says “showElectrical is not defined” on the originating page (not the page it’s calling). I have the taffyDB.js file loading at the top of the html file, not the bottom, so it would load faster. I don’t know what else to do to open the html page and run the function from a button.