Within body I have 3 div: menu, submenu, detail. I'm using script load_menu() in menu div to load html code to submenu div. I'm using script load_data() in submenu div to load html code to detail div. In both scripts I use the fetch method. Up to now everything works fine.
I would like to load the first submenu item after loading submenu div, using onload() function. I don't know how to reform the submenu line into proper syntax in the onload() function.
Next is parts from my code:
<script>
function load_menu(htmname) {
fetch(htmname /*, options */)
.then((response) => response.text())
.then((html) => {
document.getElementById("submenu").innerHTML = html;
})
.catch((error) => {
console.warn(error);
});
}
function load_data(htmfile) {
fetch(htmfile /*, options */)
.then((response) => response.text())
.then((html) => {
document.getElementById("detail").innerHTML = html;
})
.catch((error) => {
console.warn(error);
});
}
function loadfirst() {
/* load_data("./iNat_files/PID297.html"); ???? */
}
</script>/* menu item executed onclick */
<li><a href="#submenu" onclick=load_menu("./iNat_files/P_menu.html") onload="loadfirst()">Plants</a></li>
/* the first submenu item to fetch - to be adapted and reformed for use with onload() */
<li><a href="#detail" onclick=load_data("./iNat_files/PID297.html")># 297: = Centaurea crocodylium</a></li>