CODEWITHSUNDEEP
javascriptjquery
Grg Alx
Grg Alx

Reputation: 83

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

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.

Upvotes: 0

Views: 497

Answers (2)

Tom O.
Tom O.

Reputation: 5941

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.

Upvotes: 1

Duncan Thacker
Duncan Thacker

Reputation: 5188

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')
   }       
});

Upvotes: 2

Related Questions