Time user is typing is zero even though it should be more in javascript

Question

Im trying to calculate the time from when the user starts typing to when they stop. I put two variables start and end and subtracted them from each other. But it always returns zero. Can you give an easy way to calculate wpm if possible also? I want to in the end calculate the words per minute when the user types 10 words correctly. So I need the time from when they started to when they completed the prompt.

Thanks!

Javascript:


var input = document.getElementById("boch");
input.addEventListener("keyup", function (event) {
  if (event.keyCode === 13) {
    event.preventDefault();
    document.getElementById("bocho").click();
  }
});


var element = document.querySelector("#boch");

element.onkeyup = function () {
  var value = element.value;

   if (value.includes("m")) {
     var start = Date.now();
  } 

  if (value.includes("man")) {
    document.getElementById('word-1').style.backgroundColor = 'green';
  } else {
    document.getElementById('word-1').style.backgroundColor = "red";
  }

  if (value.includes("man become")) {
    document.getElementById('word-2').style.backgroundColor = 'green';
  } else {
    document.getElementById('word-2').style.backgroundColor = "red";
  }

  if (value.includes("man become as")) {
    document.getElementById('word-3').style.backgroundColor = 'green';
  } else {
    document.getElementById('word-3').style.backgroundColor = "red";
  }

  if (value.includes("man become as and")) {
    document.getElementById('word-4').style.backgroundColor = 'green';
  } else {
    document.getElementById('word-4').style.backgroundColor = "red";
  }

  if (value.includes("man become as and through")) {
    document.getElementById('word-5').style.backgroundColor = 'green';
  } else {
    document.getElementById('word-5').style.backgroundColor = "red";
  }

  if (value.includes("man become as and through find")) {
    document.getElementById('word-6').style.backgroundColor = 'green';
  } else {
    document.getElementById('word-6').style.backgroundColor = "red";
  }

  if (value.includes("man become as and through find would")) {
    document.getElementById('word-7').style.backgroundColor = 'green';
  } else {
    document.getElementById('word-7').style.backgroundColor = "red";
  }

  if (value.includes("man become as and through find would here")) {
    document.getElementById('word-8').style.backgroundColor = 'green';
  } else {
    document.getElementById('word-8').style.backgroundColor = "red";
  }

  if (value.includes("man become as and through find would here and")) {
    document.getElementById('word-9').style.backgroundColor = 'green';
  } else {
    document.getElementById('word-9').style.backgroundColor = "red";
  }

  if (value.includes("man become as and through find would here and before")) {
    document.getElementById('word-10').style.backgroundColor = 'green';
  } else {
    document.getElementById('word-10').style.backgroundColor = "red";
  }

   if (value.includes("man become as and through find would here and before")) {
     var end = Date.now();
 
  }
  let millis = end-start;

  console.log(millis)

  
}

HTML:

<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<h1>
   <span id="word-1">man</span> <span id="word-2">become</span> <span id="word-3">as</span>
   <span id="word-4">and</span> <span id="word-5">through</span> <span id="word-6">find</span> <span id="word-7">would</span> <span id="word-8">here</span> <span id="word-9">and</span> <span id="word-10">before</span>
</h1>

<input type="text" id="boch" autocomplete="off">

        </div>
        <div id="typing-area">

      <button id="bocho" onclick="document.getElementById('boch').value = ''">Enter</button>

</html>




<script src="main.js"></script>```

Did you mean `==` instead of `includes`? – Niet the Dark Absol Jan 23 '21 at 20:04 — Niet the Dark Absol, Jan 23 '21 at 20:04

Rojo · Accepted Answer · 2021-01-23T21:20:08.493

1

First off, value.includes("m") is true everytime, so the timer restarts every time the function is fired. Instead, use value === "m":

if (value === "m") {
  start = Date.now();
}

You need to declare var end and var start outside of the if statement and set it inside:

var start;
if (value === "m") {
  start = Date.now();
}
// other code...
var end;
if (value.includes("man become as and through find would here and before")) {
  end = Date.now();
}
let millis = end-start;

Also, I recommend putting a space between end and start. end-start could be a variable name.

edited Jan 23 '21 at 21:20

answered Jan 23 '21 at 20:03

Rojo

2,749
1
13
34

It just gives zero. – Cactus Jan 23 '21 at 20:17
You need to do the same for `start`. I'll edit – Rojo Jan 23 '21 at 20:18
It still gives NaN and then 0. – Cactus Jan 23 '21 at 20:32
@IrfanS instead of `value.includes("m")`, it should be `value === "m"`. I'll edit again – Rojo Jan 23 '21 at 21:18
Sorry for bugging you, but it is now only giving NaN as an answer when i do console.log(millis) – Cactus Jan 23 '21 at 21:54
@IrfanS could you share a codepen or a jsfiddle? – Rojo Jan 23 '21 at 21:55
here is the link: https://codepen.io/IrfanVideo/pen/MWjdxOj – Cactus Jan 23 '21 at 21:58
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/227733/discussion-between-rojo-and-irfan-s). – Rojo Jan 23 '21 at 22:01

Time user is typing is zero even though it should be more in javascript

1 Answers1