CODEWITHSUNDEEP
javascripthtmlcssdate
Cactus
Cactus

Reputation: 87

Division in JavaScript giving undefined error

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>

Upvotes: 1

Views: 519

Answers (2)

user14182279
user14182279

Reputation:

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.

Upvotes: 0

Thomas Owen
Thomas Owen

Reputation: 73

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

Upvotes: 1

Related Questions