Determine whether the keyCode value matches any items within a specific array

Question

Determine whether the keyCode value matches any items within a specific array

Currently, as I am in the process of creating a small typewriter application, I have encountered an issue with determining if the button pressed matches the value of specific span elements.

To provide further context, there are two divs each containing spans with different letter values. These spans are stored in variables named leftPartSpans and rightPartSpans. My approach involves iterating through each item using a loop to check if any of the characters match the key code:

for (i=0; i<leftPartSpans.length; i++) {

            if(pressedKey == leftPartSpans[i].nodeValue) {

                leftPart.style.webkitTransform = "rotateZ(20deg)";

            }

        }

Unfortunately, this method seems to fall short of achieving the desired outcome. For more details, you can view the entire project at http://codepen.io/gbnikolov/pen/wJHhk

Thank you in advance, Georgi

javascript char keycode

Answer 1

Answer №1

keydown and keyup events do not differentiate between upper and lower case letters in terms of keycodes. This means that the pressedKey will always be an uppercase letter when using either event. Since all the spans contain lowercase letters, they will never match and the if block will never execute.

To address this issue, you can utilize the keypress event which sends different keycodes for upper and lower case letters.

document.querySelector('body').addEventListener('keypress', function(e) {
  //...
});

Answer 2

keydown and keyup events do not differentiate between upper and lower case letters in terms of keycodes. This means that the pressedKey will always be an uppercase letter when using either event. Since all the spans contain lowercase letters, they will never match and the if block will never execute.

To address this issue, you can utilize the keypress event which sends different keycodes for upper and lower case letters.

document.querySelector('body').addEventListener('keypress', function(e) {
  //...
});

Determine whether the keyCode value matches any items within a specific array

Answer №1

Similar questions

The array remains empty despite attempts to push elements into it

Utilizing jQuery to send AJAX requests and display the results on separate lines within a textarea

Utilizing jQuery to add a class to an element when a different one is hovered above

Ensuring input validity and blocking changes if not compliant with AngularJS patterns

A guide on passing an array parameter using JavaScript

Submitting Forms in Django with AJAX for Seamless User Experience

Is it possible to move the res.send() outside of the function in node.js?

Convert the data into a format that is compatible with JavaScript

Implementing validation for multiple email addresses in JavaScript: A step-by-step guide

Node.js route does not support io.sockets.on functionality

Tips for securely integrating freelancers into your web project

Automatically populate select2 dropdown in ASP.NET MVC Core using AJAX

AngularJS Large file size

Tips for passing a value or argument to the map function in JavaScript

Textures in Three.js are appearing black when loaded

To restore the position of the chosen object in Three.js after clicking reset

The problem with the Image Gallery carousel not functioning properly in a right-to-left direction arises when attempting to modify

I'm encountering an issue with fetching table data using AJAX, as I consistently receive an undefined value in Console.log every time I try to fetch req_id from the table. Can anyone help me

Utilizing the ng-if directive to choose the second element within an iteration of an ng-repeat loop

Is it possible to verify if a user is accessing a webpage through Electron?