CODEWITHSUNDEEP
javascript
jokoka7524
jokoka7524

Reputation: 123

Why is it logging the wrong item?

I am trying to capture keystrokes of users, then put it in localStorage. But the last function test() is not working properly. It is logging data2 instead of data5. After I reload and the script is loaded again, it is loading data5. But I wan't to instantly log data5. Maybe someone knows why!

window.onload = function () { // CHECK JQUERY EXISTENCE
  if (window.jQuery) {
    abc();
  } else {
    script = document.createElement("script");
    script.onload = abc;
    script.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js";
    document.head.appendChild(script);
  }
};
function abc() { // CAPTURE KEYSTROKES
  test = "";
  test2 = "";
  test3 = "";
  test4 = "";
  check = localStorage.getItem("test");
  check2 = localStorage.getItem("test2");
  check3 = localStorage.getItem("test3");
  check4 = localStorage.getItem("test4");
  if (check == null) { // EXECUTE IF CHECK (HOLDING TEST VALUE) IS EMPTY
  data = "";
  $(document).keypress(function (e) {
    data += e.key;
    localStorage.setItem("test", data);
  });
} else if (check2 == null){ // EXECUTE IF CHECK2 (HOLDING TEST2 VALUE) IS EMPTY
  data2 = localStorage.getItem("test");
  $(document).keypress(function (e) {
    data2 += e.key;
    localStorage.setItem("test2", data2);
  });
} else if (check3 == null){ // EXECUTE IF CHECK3 (HOLDING TEST3 VALUE) IS EMPTY
  data3 = localStorage.getItem("test2");
  $(document).keypress(function (e) {
    data3 += e.key;
    localStorage.setItem("test3", data3);
});
} else if (check4 == null){ // EXECUTE IF CHECK4 (HOLDING TEST4 VALUE) IS EMPTY
  data4 = localStorage.getItem("test3");
  $(document).keypress(function (e) {
    data4 += e.key;
    localStorage.setItem("test4", data4);
    data5 = localStorage.getItem("test4");
});
}
}
function test() { // VALIDATE lOCALSTORAGE ITEMS FOR CONTEXT
data2 = localStorage.getItem("test");
data3 = localStorage.getItem("test2");
data4 = localStorage.getItem("test3");
data5 = localStorage.getItem("test4");
if (data2 || data3 || data4 || data5 != null) {
  if (data2 != null && data3 && data4 && data5 == null) {
    console.log(data2);
  } else if (data3 != null && data4 && data5 == null) {
    console.log(data3);
  } else if (data4 != null && data5 == null) {
    console.log(data4);
  } else if (data5 != null) {
    console.log(data5); // HITS WHEN RELOADED
  }
} else {
  return;
}
}
test();

Upvotes: 2

Views: 84

Answers (2)

Scott Marcus
Scott Marcus

Reputation: 65795

The solution is much simpler than your approach. 2 simple lines of code will do it. Upon each keystroke, append that key to your localStorage value.

The following won't work here in Stack Overflow because of sandboxing, but a working example can be seen at this Fiddle.

Also, note that keypress is a deprecated event and doesn't fire for non-printable characters. You should use keydown instead.

$(document).on("keydown", function(event){
  // This code will concatenate the last key pressed with a string
  // of characters already present in localStorage. If nothing
  // is in localStorage, then this code will create a fresh string.
  let storageChars = localStorage["chars"] ? localStorage.getItem("chars") : "";
  localStorage.setItem("chars", storageChars + event.key);
 
  // Then, you can extract/examine the characters in the string in many ways,
  // like looping over the string, turning the string into an array, indexing 
  // the string, etc.
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 1

Ed Lucas
Ed Lucas

Reputation: 7345

From your other logic, it looks like you only want to log data2 if it's not null and the others are null. In that case, you want to compare each value to null in your conditional.

e.g. data2 !== null && data3 === null && data4 === null && data5 === null

If you don't compare to null, you're just testing for a "truthy" value (values that are not false, 0, 0n, "", null, undefined, or NaN. See: https://developer.mozilla.org/en-US/docs/Glossary/Truthy).

Additionally, it looks like you may be trying to compare each of the values to null in this conditional: if (data2 || data3 || data4 || data5 != null). If so, you'll want to code it as if (data2 !== null || data3 !== null || data4 !== null || data5 !== null).

You may also find this helpful: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#Logical_operators_AND_OR_and_NOT

Upvotes: 0

Related Questions