I am making a check prime number function in js. I want to let the textContent of status shows 'processing` when the function is executing (finding prime number).
However, my code doesn't work any more.
Here is my code:
let start = performance.now()
let time = document.getElementById('time')
let texts = document.getElementById('texts')
let amount = document.getElementById('amount')
let status = document.getElementById('status')
function checkprimenumber(){
let start = performance.now()
let value = texts.value
if(value ==''){
value = texts.placeholder;
}
for (let i = 0;i<value;i++){
time.textContent = ''
amount.textContent = ''
var nums = 2;
for (let x = 0;x<=i/2;x++){
if(nums>3){
break;
}
if(i!==0 && i!==1 && i !== x){
if(i%x === 0){
nums++;
}
}
}
if(nums === 3){
amount.textContent = parseFloat(amount.textContent)+1
}
if(i === value-1){
status.textContent = 'done'
console.log('got it')
let end = performance.now()
time.textContent = (end-start).toFixed(3)
}
}
}
checkprimenumber()
<h1>Get Prime number application:</h1>
<h2>Prime Number: <span></span></h2>
<h3>Processing Time: <span id = 'time'>0</span> ms</h3>
<h3>Number: <span id = 'amount'>0</span></h3>
<h3>Status: <span id = 'status'>Processing</span></h3>
<label for = 'texts'>Enter the range you want to get number from</label>
<input type = 'text' id = 'texts' placeholder = '100000'>
<input type = 'button' id = 'button' value = 'set' onclick = 'checkprimenumber()'>status.textContent never shows 'processing' even though I enter a very big number.
Why does this happen?
For the amount.textContent, what I expect is that it could be added when the function is executed. However, the amount.textContent only return amount when the function finishes executing.
Do anyone know why does this problem happens?
I have been struggled with this for quite a long time.
Thanks for any responds and support.
The UI won't update until javascript finishes running. One way you can give it time to update the UI is by using setTimeout();
let start = performance.now();
let time = document.getElementById('time');
let texts = document.getElementById('texts');
let amount = document.getElementById('amount');
let status = document.getElementById('status');
function checkprimenumber() {
status.textContent = 'processing';
// execute the calculation later, leaving time for the GUI to update.
setTimeout(function(){ reallycheckprimenumber(); }, 10);
}
function reallycheckprimenumber() {
let start = performance.now();
let value = texts.value;
if (value == '') {
value = texts.placeholder;
}
for (let i = 0; i < value; i++) {
time.textContent = ''
amount.textContent = ''
var nums = 2;
for (let x = 0; x <= i / 2; x++) {
if (nums > 3) {
break;
}
if (i !== 0 && i !== 1 && i !== x) {
if (i % x === 0) {
nums++;
}
}
}
if (nums === 3) {
amount.textContent = parseFloat(amount.textContent) + 1;
}
if (i === value - 1) {
status.textContent = 'done';
console.log('got it');
let end = performance.now();
time.textContent = (end - start).toFixed(3);
}
}
}
checkprimenumber();<h1>Get Prime number application:</h1>
<h2>Prime Number: <span></span></h2>
<h3>Processing Time: <span id = 'time'>0</span> ms</h3>
<h3>Number: <span id = 'amount'>0</span></h3>
<h3>Status: <span id = 'status'>Processing</span></h3>
<label for = 'texts'>Enter the range you want to get number from</label>
<input type = 'text' id = 'texts' placeholder = '100000'>
<input type = 'button' id = 'button' value = 'set' onclick = 'checkprimenumber()'>UI is user interface. setTimeout makes the code execute later instead of immediately. (https://www.w3schools.com/jsref/met_win_settimeout.asp). If the code executes immediately then the user interface won't update because the browser is busy executing the code. Setting it to execute later means the code stops running briefly, the interface updates, and then the code executes again later.