What is the process for updating the boolean value of a property within an object stored in an array?

Question

What is the process for updating the boolean value of a property within an object stored in an array?

I am completely new to the world of coding and am currently diving into learning javascript. Please excuse any misunderstandings I may have as I navigate this new territory. While I've been successful in grasping the basics through self-teaching, I have encountered a roadblock when attempting to detect multiple keypresses simultaneously. After researching various methods, it seems that the general approach involves tracking key events on 'keydown' and 'keyup'. However, I am struggling with setting keyBoard['w'].pressed = true.

const keyBoard = {
    w: {pressed: false}
}

document.addEventListener('keyDown', (e) => {
    keyBoard[e.key].pressed = true
});

if(keyBoard['w'].pressed){
    alert("success!")
}

The code above represents a simple test case I created to help me better understand the concept. Despite experimenting extensively, it is evident that the issue lies in accurately setting 'w.pressed' to true. I recognize the necessity of incorporating a 'keyup' listener to reset it to false eventually, but for now, my main focus is on resolving the current challenge. Your assistance is greatly appreciated!

javascript arrays keyboard boolean

Answer 1

Answer №1

To incorporate your IF statement into your listener function, make sure to use 'keydown' instead of 'keyDown'. Additionally, I included a line that records each key press in your object.

const keyboard = {
  w: {
    pressed: false
  }
}

document.addEventListener('keydown', (e) => {
  keyboard[e.key] = keyboard[e.key] || {}
  keyboard[e.key].pressed = true;
  console.log(keyboard)
  if (keyboard['w'].pressed) {
    console.log("Success!")
  }

});

Answer 2

To incorporate your IF statement into your listener function, make sure to use 'keydown' instead of 'keyDown'. Additionally, I included a line that records each key press in your object.

const keyboard = {
  w: {
    pressed: false
  }
}

document.addEventListener('keydown', (e) => {
  keyboard[e.key] = keyboard[e.key] || {}
  keyboard[e.key].pressed = true;
  console.log(keyboard)
  if (keyboard['w'].pressed) {
    console.log("Success!")
  }

});

Answer 3

Answer №2

Let's start by addressing the issue with your event handling. The correct event name should be keydown, not keyDown. You can find more information about it on MDN: keydown event documentation

Looking at your code, the problem lies in how you are trying to add a value to a non-existing key in your object. This will result in an error being thrown:

Cannot set properties of null (setting 'pressed')

To observe this error, open the browser console with F12.

The solution involves checking if the key exists in the object before setting its property. Here's how you can update your event listener to handle this scenario:

document.addEventListener('keydown', (e) => {
    keyBoard[e.key] = keyBoard[e.key] || {};
    keyBoard[e.key].pressed = true;
});

By making this modification, you ensure that the key is properly initialized before setting its attribute.

Now, let's focus on achieving the desired functionality of triggering an alert when the w key is pressed. Since the script runs during the page load, the initial if statement won't execute as intended. To make the alert work correctly, incorporate it within the event listener:

document.addEventListener('keydown', (e) => {
    if (e.key === 'w') {
        alert("success");
    }
});

Answer 4

Let's start by addressing the issue with your event handling. The correct event name should be keydown, not keyDown. You can find more information about it on MDN: keydown event documentation

Looking at your code, the problem lies in how you are trying to add a value to a non-existing key in your object. This will result in an error being thrown:

Cannot set properties of null (setting 'pressed')

To observe this error, open the browser console with F12.

The solution involves checking if the key exists in the object before setting its property. Here's how you can update your event listener to handle this scenario:

document.addEventListener('keydown', (e) => {
    keyBoard[e.key] = keyBoard[e.key] || {};
    keyBoard[e.key].pressed = true;
});

By making this modification, you ensure that the key is properly initialized before setting its attribute.

Now, let's focus on achieving the desired functionality of triggering an alert when the w key is pressed. Since the script runs during the page load, the initial if statement won't execute as intended. To make the alert work correctly, incorporate it within the event listener:

document.addEventListener('keydown', (e) => {
    if (e.key === 'w') {
        alert("success");
    }
});

Answer 5

Answer №3

Examining your code in three sequential blocks:

Defining a constant with an object
Attaching an event to the document
Checking the status of the object

Everything appears to be in order, but when attaching an event, the code execution does not halt until the event occurs. Therefore, the main thread continues running and the keyBoard object remains unchanged in the third step.

To rectify this, you should monitor the variable within a loop, for example:

setInterval(() => {
  if (keyBoard['w'].pressed){
    alert("success!")
  }
}, 10);

although it may not be necessary in this scenario.

The correct approach is to allow your code to execute a method every time a key is pressed or released:

const keyBoard = {
    w: {pressed: false}
}

document.addEventListener('keydown', e => {
    keyBoard[e.key] ||= {};
    keyBoard[e.key].pressed = true
    doImportantStuff();
});

document.addEventListener('keyup', e => {
    keyBoard[e.key] ||= {};
    keyBoard[e.key].pressed = false; // or better `delete keyBoard[e.key];`
    doImportantStuff();
});

function doImportantStuff() {
    console.log(Object.entries(keyBoard));
}

If you only need to track the pressed state for each key, your code could be simplified slightly by omitting the pressed property:

const keyBoard = {}

document.addEventListener('keydown', e => {
    keyBoard[e.key] = true
    doImportantStuff();
});

document.addEventListener('keyup', e => {
    keyBoard[e.key] = false; // or better `delete keyBoard[e.key];
    doImportantStuff();
});

function doImportantStuff() {
    console.log(Object.keys(keyBoard).filter(key => keyBoard[key]));
    // console.log(Object.keys(keyBoard)); if you delete keys from keyBoard when they are released
}

Answer 6

Examining your code in three sequential blocks:

Defining a constant with an object
Attaching an event to the document
Checking the status of the object

Everything appears to be in order, but when attaching an event, the code execution does not halt until the event occurs. Therefore, the main thread continues running and the keyBoard object remains unchanged in the third step.

To rectify this, you should monitor the variable within a loop, for example:

setInterval(() => {
  if (keyBoard['w'].pressed){
    alert("success!")
  }
}, 10);

although it may not be necessary in this scenario.

The correct approach is to allow your code to execute a method every time a key is pressed or released:

const keyBoard = {
    w: {pressed: false}
}

document.addEventListener('keydown', e => {
    keyBoard[e.key] ||= {};
    keyBoard[e.key].pressed = true
    doImportantStuff();
});

document.addEventListener('keyup', e => {
    keyBoard[e.key] ||= {};
    keyBoard[e.key].pressed = false; // or better `delete keyBoard[e.key];`
    doImportantStuff();
});

function doImportantStuff() {
    console.log(Object.entries(keyBoard));
}

If you only need to track the pressed state for each key, your code could be simplified slightly by omitting the pressed property:

const keyBoard = {}

document.addEventListener('keydown', e => {
    keyBoard[e.key] = true
    doImportantStuff();
});

document.addEventListener('keyup', e => {
    keyBoard[e.key] = false; // or better `delete keyBoard[e.key];
    doImportantStuff();
});

function doImportantStuff() {
    console.log(Object.keys(keyBoard).filter(key => keyBoard[key]));
    // console.log(Object.keys(keyBoard)); if you delete keys from keyBoard when they are released
}

What is the process for updating the boolean value of a property within an object stored in an array?

Answer №1

Answer №2

Answer №3

Similar questions

Tips for Optimizing Navigation with Jquery Integration

Having trouble with TypeScript configuration of typeRoots and types functionality not functioning correctly

Leveraging Vue slots to display a component inside another component

Eliminating the selected option from the dropdown menu after it has been added with Angular

VB .Net - Issue with array index being out of range

The design of iOS7 Safari becomes distorted when the orientation changes and an input field is in focus

Guide to looping through a map arraylist in JavaScript

Sending information from the parent component to the child Bootstrap Modal in Angular 6

What is the process for a browser to load JavaScript resources?

Exporting a module that will return undefined instead of a value

I'm currently attempting to incorporate the Material-UI InfoIcon into my code, but I'm unsure of how to properly integrate it within a TextField component

A guide on clearing the selected value in a dropdown menu with Angular.js

Guide on utilizing two separate collections to store different types of data for an application's users

Tips for performing an Ajax GET request in order to retrieve data from a Rails server and then transferring it to JavaScript (specifically for use with

Displaying error messages on a form that uses ng-repeat in Angular

Having trouble getting the `load` event to fire on Safari in the window.addEventListener function?

Simple method for converting pixel values to em units

The dynamic duo of MongoDB and Prisma: forging a groundbreaking one-to-many relationship

Determine the time variance in hours and minutes by utilizing the keyup event in either javascript or jquery

jQuery's jqXHR deferreds do not link up with $.when(...) for chaining purposes