I have a HTML file that contains the following element
<div class="altitude">
<span><b>Solar Altitude</b></span>
<p>Altitude Now: <span id="currentAlt"></span>°</p>
<p style="font-size: .8em"><b>Current Shadow: <span id="currentShadow"></span>'</b></p>
<p style="font-size: .8em"><b>Dhuhur Shadow: <span id="dhuhurShadow"></span>'</b></p>
<p style="font-size: .8em"><b>Asr Shadow: <span id="asrShadow"></span>'</b></p>
<a href="AltitudeGraphicV2.html" onClick="CacheData()">
<canvas id="altitudeCanvas" style="border:1px solid grey">
<script>
updateAltitude();
</script>
</canvas>
</a>
<p>Tap To Open</p>
</div>
and the updateAltitude(); function call contained inside the tags is in the same file but defined below the the html but with the tags inside script tags
<script>
function updateAltitude()
{
...javascript code here
}
//plus other functions below
</script>
If the javascript code within the updateAltitude() function is instead placed in the element in place of the function call, no error results. The Uncaught ReferenceError pops up when updateAltitude(); is called as in the code above. Why is this happening?
this is the error I see when using Chrome Dev tools to debug this
Uncaught ReferenceError: updateAltitude is not defined
at Shadows_test3a.html:353:7
I wanted to move the javascript code out of the element since the code actually constructs the graphics used in the element that is contained in that element, but I needed to have the graphic elements update when the body of the page loads
<body onload="setup()">
<script>
function setup()
{
var whatPage = localStorage.getItem("fromPage");
const qiblahURL = "https://www.crescentchaser.com/prayer_time/QiblahGraphic.html";
const altitudeURL = "https://www.crescentchaser.com/prayer_time/AltitudeGraphicV2.html"
if (whatPage == qiblahURL || whatPage == altitudeURL)
{
dataLoad();
whatPage = "";
localStorage.setItem("fromPage", "");
chooseMethod();
updateQiblah();
updateAltitude();
}
else
{
getLocation();
updateQiblah();
updateAltitude();
}
}
</script>
so I thought that if I moved the javascript code from the element and into a function I could invoke the code to read the changes in variables used to draw the graphics and update the graphic when I needed it to.