keydown - making a loop to acces an object for each key pressed

Question

I want to make a page when for each letter key i pressed to display something (an image and a paragraph for now). I can do it by repeating my code for each key, and this isn't how i want it, so i think i need a loop but i can not figure it out how to do it.

I can do it like this:

$(document).keydown(function(event) {

if (event.keyCode == 65) {
    $("#paragraph").text("text1");
    $('#divImg').html('img1');
   }


if (event.keyCode == 83) {
    $("#paragraph").text("text2");
    $('#divImg').html('img2');
   }


if (event.keyCode == 68) {
    $("#paragraph").text("text3");
    $('#divImg').html('img3');
   }

}
  );

I want to do it by using a loop and accesing an object array like:

var keys = {
                a: {
                    par: "text1",
                    img: "img1"},
                s: {
                    par: "text2",
                    img: "img2"
                },
                d: {
                    par: "text3",
                    img: "img3"
                }
            }

and instead of repeating my code 25 times for each key(i dont want 25 if statements), i want my code to figure it out what key i pressed and to get his image and his paragraph from the object. I can't figure it out a way to make it. I tried to convert the keycode into a character but after a while i get stuck into the code.

I hope I've been more explicit this time, and I apologize if I made any confusion.

Do you just want to take the values from the `keys` object? If so, you should make that clear and maybe change the text from `aassdd` to `text1` so they agree. Right now it's not clear if this is what you are asking. — Mark, Feb 02 '19 at 14:26

score 2 · Answer 1 · answered Feb 02 '19 at 14:31

I'd use a look-up table, like this:

const keyCodes = {
    65: 'aassdd',
    83: 'dsa',
    68: 'asd'
};

$(document).keydown(function(event) {

   //lookup the text in our table
   const textToSet= keyCodes[event.keyCode];

   //only do stuff if there was an entry in the table
   if (text) {
      $("#paragraph").text(textToSet);
      $('#divImg').html('img src')
   }       
});

If you want to use the character in your lookup table, you can use String.fromCharCode() to convert:

const keys = {
    a: 'aassdd',
    s: 'dsa',
    d: 'asd'
};

$(document).keydown(function(event) {

   //get the pressed character (cribbed from https://stackoverflow.com/questions/3977792/how-to-convert-keycode-to-character-using-javascript)
   const characterPressed = String.fromCharCode(event.keyCode);

   //lookup the text in our table
   const textToSet = keys[characterPressed];

   //only do stuff if there was an entry in the table
   if (text) {
      $("#paragraph").text(textToSet);
      $('#divImg').html('img src')
   }       
});

Tom O. · Accepted Answer · 2019-02-02T21:44:42.630

You can do something like this:

var keys = {
  a: {
    par: "text1",
    img: "img1"
  },
  s: {
    par: "text2",
    img: "img2"
  },
  d: {
    par: "text3",
    img: "img3"
  }
};

const paragraphEl = document.querySelector('#paragraph');
const divImgEl = document.querySelector('#divImg');
const errorEl = document.querySelector('#error');
document.addEventListener('keydown', e => {
  errorEl.innerHTML = '';
  if (keys[e.key]) {
    paragraphEl.innerHTML = keys[e.key].par;
    divImgEl.innerHTML = keys[e.key].img;
  } else {
    paragraphEl.innerHTML = '';
    divImgEl.innerHTML = '';
    errorEl.innerHTML = `No key mapping found for "${e.key}"`;
  }
});

<div id="paragraph"></div>
<div id="divImg"></div>
<div id="error"></div>

By evaluating the KeyBoardEvent's key property, you don't have to bother with charCodes (which is a deprecated property anyway) because you get an actual string value representation of the key that was pressed.

keydown - making a loop to acces an object for each key pressed

2 Answers2