cclohmar/vm-bench
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: use permanent DOM elements for progress instead of innerHTML reset

Browse source 
innerHTML reset in startSession was destroying #phase-label and
#progress-fill elements, then recreating them with same IDs. XHR
progress events fired asynchronously but getElementById might
return stale references or fail during the DOM update window.

Now #phase-label, #progress-fill, and #session-error are permanent
elements in the static HTML. startSession clears them via
textContent/style instead of innerHTML — no DOM destruction.
showError appends to #session-error instead of #session-status.
This commit is contained in:
Claus Lohmar 2026-07-22 05:19:13 +00:00
parent d8d301a13f
commit 6519fc1cf7
1 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
frontend/templates/index.html
View file

@ -49,6 +49,7 @@
<div class="progress-bar"> <div class="progress-bar">
<div class="progress-fill" id="progress-fill" style="width:0%">0%</div> <div class="progress-fill" id="progress-fill" style="width:0%">0%</div>
</div> </div>
<div id="session-error"></div>
</div> </div>
</div> </div>
@ -75,8 +76,8 @@ function setPhase(label, pct, isSpinner) {
} }
function showError(msg) { function showError(msg) {
const status = document.getElementById('session-status'); const el = document.getElementById('session-error');
if (status) status.innerHTML += '<div class="error" style="margin-top:0.5rem;">' + msg + '</div>'; if (el) el.innerHTML += '<div class="error" style="margin-top:0.5rem;">' + msg + '</div>';
} }
function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); }
@ -91,12 +92,11 @@ async function startSession(e) {
btn.disabled = true; btn.disabled = true;
analysis.innerHTML = ''; analysis.innerHTML = '';
polling.innerHTML = ''; polling.innerHTML = '';
status.innerHTML = ` // Reset permanent elements (no innerHTML — keeps DOM references alive)
<div id="phase-label" style="margin-bottom:0.5rem;"></div> document.getElementById('phase-label').textContent = '';
<div class="progress-bar"> var pf = document.getElementById('progress-fill');
<div class="progress-fill" id="progress-fill" style="width:0%">0%</div> pf.style.width = '0%'; pf.textContent = '0%';
</div> document.getElementById('session-error').textContent = '';
`;
status.classList.remove('hidden'); status.classList.remove('hidden');
const vmid = document.getElementById('vmid').value; const vmid = document.getElementById('vmid').value;