How to add scraped data with puppetteer into html - html

Question

ADVISORY : I'm trying my hands at this for the first time.
I created an html page that displays bus timings. To get the bus timings I had to scrape the local bus service website with puppeteer. I do scrape the time for the next bus correctly, but I can't seem to add it to my html page.
I've tried adding the script tags with src pointing to my js file. I tried adding them to the head, in the div that should display the time and right before the closing body tag, but I couldn't display the time. I event tried to add the js in a script tag to the html and that didn't work.
//Here's code for scraping in busTimeScraper.js :
let scrape = async() => {
const browser = await puppeteer.launch({
headless: true
});
const page = await browser.newPage();
await page.goto('bustimes.com'); //Dummy website for this eg
await page.setViewport({width: 1500, height: 1500})
await page.waitFor(5000);
const result = await page.evaluate(() => {
let time = document.querySelector('#RouteTimetable').innerText;
return {
time
}
});
browser.close();
return result;
};
scrape().then((value) => {
var timing = value.time;
document.querySelector('#Time').innerText=timing;
});
//The html is :
<div id="Time">
<!--<script type="text/javascript" src="busTimeScraper.js">
</script>-->
</div>
I can see the time being scraped when I run the js file and do a console.log on the timing variable. I expected the div to be populated with the same time value, but it just stays blank

Answer 1

You simply cannot add your server-side JS in your client-side html using a script tag and expect it to work, no matter where you add (in head, inside element or before closing body);
Simplest solution would be to expose the result (timing variable) VIA NodeJsAPI and consume the API VIA your client-side JS to get the value and do rest of the client-side things.