Need help with a forEach loop

[kernix]

I’m slowly getting better at JS. I’ve been going through my projects and condensing code will I have a lot of repetition. I am using JS for an event listener on 3 different cards. I have on ‘click’ handled but I also had code for ‘keydown’ events. Here is what I had repeated for each of the 3 cards:

flip1.addEventListener('keydown', function (e) {
  if (e.code !== 'Tab') {
    e.preventDefault();
    flip1.classList.toggle('show-answer');
  }
});

I have variables for the 3 cards called flip1, flip2, flip3 - each is using the element ID.

I managed to reduce the 3 codes blocks into the following:

const cardsId = [flip1, flip2, flip3];

cardsId.forEach(function(card) {
  card.addEventListener('keydown', function (e) {
    if (e.code !== 'Tab') {
      e.preventDefault();
      card.classList.toggle('show-answer');
    } 
  });
});

But I wanted to reduce it to a ternary operator and that is where I am having problems. I tried this:

cardsId.forEach(function(card) {
  card.addEventListener('keydown', () => card.classList.toggle('show-answer'));
});

And that works except for the TAB and SPACEBAR keys. So I tried using a ternary operator but I don’t know what to use for the else condition. Here is an example of one thing I tried:

cardsId.forEach(function(card) {
  card.addEventListener('keydown', (e) => e.code !== 'Tab' ? e.preventDefault() && card.classList.toggle('show-answer') : true);
});

No keydown events work for that. If you think the first forEach block is fine, then I’ll just stay with that, but it seems like a ternary statement would work here.

The cards are on my portfolio page which I will link below, but I’m still working locally so the changes I’ve made are not in the live JS file yet. Any ideas? Here is the page: James Kernicky Portfolio

[shugyoza]

I might be wrong, but you can’t use && to run two lines of code. I believe JS will interpret it as a(nother) if statement. May be this link might inspire you to try other things?https://stackoverflow.com/questions/6678411/javascript-ternary-operator-with-multiple-statements

[anon22924398]

The code is correct but e.preventDefault() does not return a value or it returns undefined. The code after && is only executed after a “trusty” value return.

---

PS: I’m not sure that you need e.preventDefault() anyways, unless you’re sending a form. So you can probably remove it.

[lasjorg]

If you only have one condition then you do not need a ternary and there is nothing wrong with if statements. They are nice and legible. I would advise you not to try and go out of your way to turn all your conditions into ternaries.

Code isn’t cleaner or more legible just because it is shorter or on one line. Code that adds any type of mental tax is harder to read no matter how you think it looks.

I have no problem with ternaries in code. But do not make the mistake of thinking your code needs to look a certain way by having ternaries everywhere. That is a beginner mistake. The code needs to read well, if a ternary can help with that, great. But do not make the mistake of thinking that if statements are somehow bad.

[kernix]

Excellent! That is a great insight. As you can tell, I’m still in a learning mode. I’ve been doing a lot of challenges on Codewars and I see a lot of solutions that use ternaries with a high number of people using that solution. I settled on the if statement solution so I’ll stick with that. Thanks!