I am very new to javascript and HTML and CSS, but I thought I would make a website for a math tool.
I have a long function that computes some numbers. I would like to keep track of how close the function is to completion in the UI, so I thought I could keep a label called progress that I update every few thousand iterations. Unfortunately, when I try to update the label in my function, the label is only changed when the entire function has finished running. I am assuming the issue is because of some optimization I am unaware of. I am wondering if there is a way to brute force the label to update?
`function getValues() {
let e = document.getElementById('progress');
e.innerHTML = "Running..."
}`
This is where I first attempt to update the label with no success. I try unsuccessfully a few more times later on when trying to store percents.
This is where I declare(?) the label (it is really a header but this makes no difference I assume) called progress.
<div class = "button">
<h3 id="progress">Progress Indicator.</h3>
<input type="button" id="submit" value="Submit" onclick="getValues()">