I have encountered what appears to be a common yet perplexing issue. You can view a draft of the page here. The specific behavior I am aiming for is as follows:
To execute a calculation, use
<script type="text/javascript" src="amp.js"></script><body onload="amp()">. Due to the lengthy nature of amp.js, I will not include it here. Assume all variables are correctly declared and initialized, and my scripts are linted. Then, reset the progress bar and counter to zero:
<progress id="progress" value="100" max="100"></progress><output class="percent" id="percent">100</output><span class="prozent">%</span>
...when the user focuses on changing input parameters for a new calculation:
<input type="number" name="theta0" id="theta0" value="0.1" min="0.0" max="1.6" step="0.1" onfocus="reset()">
...using
<script type="text/javascript" src="../reset.js"></script>/*jslint browser: true, devel: true */
function reset() {
"use strict";
document.getElementById('progress').value = 0;
document.getElementById('percent').innerHTML = 0;
}
Once ready, the user can initiate a new calculation with
<input type="button" value="Evaluate" onclick="go = setInterval(animate, 10); amp()"><script type="text/javascript" src="../animate.js"></script>/*jslint browser: true, devel: true */
var go = 0;
var value = 0;
var max = 100;
function animate() {
"use strict";
if (value >= max) {
clearInterval(go);
return;
}
var pBar,
percent;
pBar = document.getElementById('progress');
percent = document.getElementById('percent');
value += 1;
pBar.value = value;
percent.innerHTML = value;
if (value === max) {
clearInterval(go);
}
}
The onfocus and onclick events are not functioning properly. However, individually calling reset or animate with <body onload=""> does work. The console provides no clues. For helpful suggestions, refer to this list here. Although it may seem unrelated, it has been noted that faulty CSS can lead to unusual issues. Here's mine:
input {
background-color: snow;
border: 1px solid darkseagreen;
box-sizing: border-box;
color: indigo;
font: 1em "Computer Modern", serif;
width: 10%;
}
input[type=number] {
border-left-style: none;
border-right-style: none;
padding-left: 5px;
vertical-align: middle;
}
input[type=number]:focus {
background-color: white;
border: 1px solid black;
border-left-style: none;
border-right-style: none;
color: black;
outline: none;
}
input[disabled] { background-color: lightgray }
...and...
input[type=button] {
background-color: ghostwhite;
background-image: linear-gradient(ghostwhite, #E0FFFF);
border: 3px solid #4CC417;
border-radius: 7px;
color: indigo;
font: 1.1em "Trebuchet MS", sans-serif;
margin-left: 10px;
padding: 5px;
}
input[type=button]:hover { border: 3px solid orange }
input[type=button]:focus {
background-color: aliceblue;
background-image: linear-gradient(#D6F5F5, ghostwhite);
border: 3px solid fuchsia;
color: black;
outline: none;
}
Any insights or recommendations would be greatly appreciated.
Update
Interestingly, the version found here somewhat functions. However, the issue lies in the improper functioning of the reset function, especially during subsequent calculations by the user. Additionally, an onchange event needs to be added to those input boxes.