Question 52778 in Javascript Question posted in
A very good W3school tutorial can be found here.

I need to remove the loop that comes on the final output of my Javascript program

I am writing a program that can detect the number of words that a user can type in certain seconds or minutes. I am new to javascript and my understanding basic. The issue here is that after the number of words is successfully calculated, the ‘time limit exceeded’ warning displays in loop and equal in no to the number of words typed. Same thing happens to the final result output that displays in the console. So definitely, the loop is tied to the number of inputs. Please help out

I have tried switching the codes, changing the positions and done research on the cause of the loop, but I seem stuck and decide to try out stackoverflow

Javascript script code:

    let no_of_words =''

const input_box = document.getElementById('input_box')
const input_para = document.getElementById('input_para')
const input_submit = document.getElementById('input_submit')


function input_result() {
  const info = document.createElement('p')
  info.textContent ='You have exceeded the time'
  info.style.color ='red'
  input_para.appendChild(info)
  //console.log(boxer);
  no_of_words = boxer.length;
  console.log(`You succesfully typed ${no_of_words} words in 10 seconds`);

}

function lock_input(){
  input_box.style.visibility = 'hidden'
  input_result()

}



const boxer =[]



input_box.addEventListener('keydown', (event)=>{
  setTimeout(lock_input, 3000);
  //console.log(`You pressed "${event.key}".`)
  boxer.push(event.key)
  

});

HTML code:

 <input type="textbox" id="input_box">
<input type="submit" id="input_submit">

<p id="input_para"></p>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So based on things pointed out to me by @CBroe, I was able to find the solution below. I don't know if it is a perfect one, but it works for now...

    EDITED JAVASCRIPT SCRIPT

    <pre> 
   let no_of_words =''

const input_box = document.getElementById('input_box')
const input_para = document.getElementById('input_para')
const input_submit = document.getElementById('input_submit')


function input_result() {
  const info = document.createElement('p')
  info.textContent ='You have exceeded the time'
  info.style.color ='red'
  input_para.appendChild(info)
  console.log(boxer);
  no_of_words = boxer.length;
  console.log(`You succesfully typed ${no_of_words} words in 10 seconds`);

}

function lock_input(){
  input_box.style.visibility = 'hidden'
  input_result()

}



const boxer =[]


//This is the place I made edits. Added focus event 
//and enclosed keydown event
input_box.addEventListener('focus', (event)=>{
  setTimeout(lock_input, 10000);
  //console.log(`You pressed "${event.key}".`)
  input_box.addEventListener('keydown', (event)=>{
    boxer.push(event.key)
  })  

}); </pre>

  2. 0

    this is good to go!

    let no_of_words ='';
const input_box = document.getElementById('input_box')
const input_para = document.getElementById('input_para')
const input_submit = document.getElementById('input_submit')


function input_result() {
  const info = document.createElement('p')
  info.textContent ='You have exceeded the time'
  info.style.color ='red'
  input_para.appendChild(info)
  //console.log(boxer);
  no_of_words = boxer.length;
  console.log(`You succesfully typed ${no_of_words.lenght} words in 10 seconds`);

}

function lock_input(){
  input_box.style.visibility = 'hidden'
  input_result()

}
const boxer =[]

var a = input_box.addEventListener('keydown', (event)=>{
   boxer.push(event.key)
    lock_input();
});


setTimeout(a, 200);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search