Hello. I am struggling to add an active Javascript function to my HUGO website. I see the function
My goal is that the value is fetched when the website is called, because the underlying JSON will be updated four or five times per day.
I already created a similar topic a few days ago:
While the GetRemote function worked, my understanding is that this will only update when building the website, not when it is called. If this should be a misunderstanding on my side, please accept my apologies.
This is the JSON file in an S3 bucket:
https://pegel-konstanz-for-website.s3.eu-central-1.amazonaws.com/json/current.json
This is published.
In the JSON, I want to read value current_level (as a first step).
Right now, I have the following Javascript function
async function loadPegel() {
try {
const response = await fetch("https://pegel-konstanz-for-website.s3.eu-central-1.amazonaws.com/json/current.json");
const current = await response.json();
console.log(current);
const currentLevel = current["current_level"];
document.getElementById("current").innerText = currentLevel;
return currentLevel;
} catch (error) {
console.error("Error loading Pegel:", error);
return null; // or handle the error in a way that suits your needs
}
}
This is stored under
/static/js/1234_test.js
The shortcode is
This is where I add the JS: <br>
<script src="/js/1234_test.js"></script> <br>
But did this work?
stored under /layouts/shortcodes/1234_test.html
Within my post, I am including this shortcode as
## Current Level
{{< 1234_test >}}
When building the website, I see the my inputs are handled as
This is where I add the JS:
<br>
<script src="/js/1234_test.js"></script>
<br>
But did this work?
Unfortunately, I am struggling to debug this properly. I am not sure whether the JS itself is the issue or how I implement it.
Any inputs on this topic would be appreciated.