Division in JavaScript giving undefined error

Question

Im trying to calculate the time between when a user starts typing and when they reach the end. So I have named two constants both using the Date.now(); function. Whenever I run the program it always gives the error : ReferenceError: start is not defined at HTMLInputElement.element.onkeyup (/main.js:86:16) The code is below:

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")) {
     let 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")) {
     let end = Date.now();
 
  }
  let millis = start/end;

  console.log(`seconds elapsed = ${Math.floor(millis / 1000)}`);


}

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>

Either use `var` to declare the variable or move it outside the `if` block. — Pointy, Jan 23 '21 at 13:40
See [*What's the difference between using “let” and “var”?*](https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var?r=SearchResults&s=1|2868.1953) — RobG, Jan 24 '21 at 01:40

score 1 · Accepted Answer · answered Jan 23 '21 at 13:49

1

Where you have declared the variable 'start' is not in the same scope as when it is being used. This means that

let millis = start/end;

is unable to see start.

You need to change let to be var. This way the scope is not restricted in the same way

answered Jan 23 '21 at 13:49

Thomas Owen

73
8

score 0 · Answer 2 · answered Jan 23 '21 at 13:52

The error says that the variable start is undefined in your element.onkeyup, that means, in your function. If the variable doesn't exist, is impossible to do any calc with it.

Basicly, you have a scope problem, the variables (let and const) exists only in the local that they are declared, so the start exist only in one if(){}. The same with the variable end.

To fixed it, the ideal is declare the variables (start and end) in the top, before your if's, together to the value.

Division in JavaScript giving undefined error

2 Answers2