02/17 - Fun Friday!

Partial parts of the keyboard event object.

Code:

// 1
KeyboardEvent = {
  code:"Digit1",
  key:"1",
  keyCode:49,
  which:49
}

// Numpad 1
KeyboardEvent = {
  code:"Numpad1",
  key:"1",
  keyCode:97,
  which:97
}

----------------------------------------------------------

So as you can see, "keyCode" and "which" are both the key code used. So if you use those, you need to specify for both if you are using both the digit and the numpad. The "key" is the actual key that is printed, so they both are "1", meaning if you want to use both digit and numpad, you don't have to specify.

----------------------------------------------------------

Now to break down.

Code:

document.addEventListener(`keydown`, function (e) {
  if (e.key.match(/[0-9]/)) {
   document.getElementById(`rating${ counter }-${ e.key !== `0` ? e.key : `10` }`).click();
   counterUp();
  }
});

----------------------------------------------------------

This part is simple, if the key is a number 0-9.

Code:

if (e.key.match(/[0-9]/)) 

----------------------------------------------------------
This is a ternary operator. If e.key does not equal "0", then e.key, else "10". So if you pressed 0, this would equal 10, but if you pressed 7, then it would equal 7.

Code:

e.key !== `0` ? e.key : `10`

which is the same as

Code:

if (e.key !== `0`) {
  return e.key;
}
else {
 return `10`;
}

----------------------------------------------------------

Using a backtick ` instead of a single quote ' or double quote ". Using the backtick is a Template literal. This lets you use ${var} inside of a string instead of having to break it up with 'text' + var + 'text'.

Code:

(`rating${ counter }-${ e.key !== `0` ? e.key : `10` }`)

is the exact same as

Code:

('rating' + counter + '-' + e.key !== `0` ? e.key : `10` + ' }')

 

I sure hope these hotel ratings don't get rejected..

 

Nice, that's super useful!
I was trying to figure out the ternary operator on my own, but thought the backtick was a single quote.

Thanks for the help. Now to go back and update old scripts with this so that it sinks into my brain.

 

yep that 30 day A/A is scary