My button doesn't successfully call a function on another html page

JavaScript
#1

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.

#2

Ok it sounds like it is just a matter of where a function is defined vs where it is called. When you include JavaScript into some HTML using the <script> tags, you are going to run that code right when the browser gets to it… right then and there. Meaning that if your taffDB.js, which calls showElectrical, is included before you have defined showElectrical, then it is not going to see the function.

I am guessing that you have showEletrical defined after taffyDB.js is included and run. Perhaps you can show us on your second page where you define showEletrical and where you include taffyDB.js.

For the record, it is typically best to try and keep as much of your javascript at the bottom of the page so that you can make sure all elements of the page are loaded before your javascript is run. There are a few instances where this is not the case (some libraries and such ask you put it in the head) but 85% of the time they should be at the end for performance reasons. Again, if it runs into JS early inline on the page, it halts the page from loading and goes off and runs the JS before continuing.

It is part of the reason they included the “defer” attribute for script tags.

But again, can you show us where you are including things in your second page that is broken?

#3

I thought as a workaround, I would do this in the first page, put the function name “showElectrical” in localStorage’s “showCategory”:

<button id="toShowEl">Electrical</button>
<script>
const btnEl = document.getElementById("toShowEl");
	
function toShowEl(){
var show = localStorage.setItem('showCategory','showElectrical');
	window.location("pages/general.html");
}
btnEl.addEventListener('click', toShowEl);
</script>

Then in the general.html page, call the function name from local storage and somehow construct the function name. Then it would be called from the page when it has already been fully loaded.

But “is not defined” is still being shown for the originating page.

#4

The bottom of the second page has:

<script src='../js/taffy-min.js'></script>
<script src='../js/taffyDB-general.js'></script>

I’m going to rethink this. I’m going to combine the first and second pages together.

Now it works great!

#5

I hope I have understood your requirements correctly.

Below I am using page1.html and page2.html, not your page file names.

On page 2 put:

<a href="page1?General">General</a>
<a href="page1?Electrical">Electrical</a>

Before the closing html tag at the bottom of page 1 put this to run when the page has loaded:

<script>
queryString=location.search.substr(1);
if(queryString=="General") showGeneral();
if(queryString=="Electrical") showElectrical();
</script>

I have not checked that works :slightly_smiling_face:

Reference:
https://www.w3schools.com/jsref/prop_loc_search.asp

#6

Looks like an interesting approach. Thanks for chiming in!