Is there a way to correlate keynum with an index number in an array?

Question

Is there a way to correlate keynum with an index number in an array?

In my array, the index numbers are set from 65 to 90 (a-z keycodes). I need to iterate through the array to check if the keynum generated from a keypress event matches one of the index numbers. If it does, I want to change the color of an onscreen button to red and display the corresponding String.fromCharCode in an element's innerHTML.

Assuming my button is like this...

<input type="button" id="a" value="A">

This is the JavaScript code...


document.onkeypress = keypress;

function keypress() {
    var buttons = [];
    var panel = document.getElementById("panel");
    var letter, i;

    for(i = 65; i <= 90; i++) {
        buttons[i] = document.getElementById(String.fromCharCode(i).toLowerCase());
    }

    var keynum = (window.event) ? event.keyCode: e.which;
    letter = String.fromCharCode(keynum);

    for(i = 65; i <= 90; i++) {
        if(buttons[i].id.toLowerCase().charCodeAt(0) === keynum) {
            buttons[i].style.backgroundColor = 'red';
            panel.innerHTML += letter;
        }
    }
}

Is there a way to make it so that when I press a button, the corresponding onscreen button changes to red? Here is a link to my JS Fiddle... http://jsfiddle.net/AdamMartin121/VXYFC/14/

javascript loops button for-loop

Answer 1

Answer №1

function handleKeyPress() {


    var buttonMap = [];
    for (var idx = 65; idx <= 90; idx++) {
        buttonMap[idx] = buttonMap[idx + 32] = document.getElementById(String.fromCharCode(idx + 32));
    }

    var keyCodeValue = (window.event) ? event.keyCode : e.which;
    if (buttonMap[keyCodeValue]) {
        buttonMap[keyCodeValue].style.backgroundColor = 'blue';
    }
}

You were trying to compare buttonMap[idx] with keyCodeValue, but buttonMap[idx] holds a DOM element, not a number. It looks like you just need to use keyCodeValue as the index in the buttonMap array.

I made adjustments to the buttonMap array so that it covers both uppercase and lowercase letters, using a loop to populate it. Initially, only uppercase letters were included, requiring the Shift key to trigger any actions.

FIDDLE

Answer 2

function handleKeyPress() {


    var buttonMap = [];
    for (var idx = 65; idx <= 90; idx++) {
        buttonMap[idx] = buttonMap[idx + 32] = document.getElementById(String.fromCharCode(idx + 32));
    }

    var keyCodeValue = (window.event) ? event.keyCode : e.which;
    if (buttonMap[keyCodeValue]) {
        buttonMap[keyCodeValue].style.backgroundColor = 'blue';
    }
}

You were trying to compare buttonMap[idx] with keyCodeValue, but buttonMap[idx] holds a DOM element, not a number. It looks like you just need to use keyCodeValue as the index in the buttonMap array.

I made adjustments to the buttonMap array so that it covers both uppercase and lowercase letters, using a loop to populate it. Initially, only uppercase letters were included, requiring the Shift key to trigger any actions.

FIDDLE

Is there a way to correlate keynum with an index number in an array?

Answer №1

Similar questions

jQuery outputs an empty array

Is it possible to assign variables inside an http call from a function in AngularJS?

Choose several locations recommended by Google Places

Enhance your MUI treeview by incorporating stylish connecting borders

What is the best method for converting IDs into objects within ng-options in Angular?

Adjusting the maximum value in the Angular Bootstrap UI rating system using ng-model

Is there a way to asynchronously load image src URLs in Vue.js?

Stylish CSS Tricks with Font Awesome Icons

Utilizing useEffect to dynamically update the state in useReducer

JavaScript: A dynamic table is created with columns populated by JSON data. The row structure is compromised

Select an option from a dropdown menu using Jquery depending on the previous selection made

Ways to display a variable within an HTML element

Header vanishes while using a JavaScript function to search through an HTML table

The form will be submitted even if the validation conditions are not met, and the form

Printing the result of an SQL query in Node.js without using braces

Having trouble incorporating a react component I discovered into my application. Encountering an error message stating "Attempted import error."

Code functioning correctly in Chrome but encountering issues in Firefox

Unable to find the solution for 'material-ui/Button'

What is the reason that the select option change event does not allow the use of "this" and event.target to access the selected value

When attempting to send coordinates to the Polyline component in React Native, an error is encountered stating that NSNumber cannot be converted to