0

I know basic Javascript, but am confronted with a problem in a Typescript file. I'm using Ionic framework to test a page where a user can theoretically "swipe" like they're on Tinder, just for fun.

I have all the JS written, because I'm moving this over from Codepen, but I can't seem to get past Typescript's syntax.

The Javascript: 

var tinderContainer = document.querySelector('.tinder');
var allCards = document.querySelectorAll('.tinder--card');
var nope = document.getElementById('nope');
var love = document.getElementById('love');

function initCards(card, index) {
  var newCards = document.querySelectorAll('.tinder--card:not(.removed)');

  newCards.forEach(function (card, index) {
    card.style.zIndex = allCards.length - index;
  }
}

The Typescript (that I put together using Google and SOF answers):

export class TestPage {

  constructor(public navCtrl: NavController) {
  }

  tinderContainer = document.querySelector('ion-content');
  allCards = document.querySelector('.tinder--card');
  nope = document.getElementById('nope');
  love = document.getElementById('love');

  declare initCards(card,index) {
    newCards = document.querySelectorAll('.tinder--card:not(.removed)');

    newCards.forEach((card,index)) {
      card.style.zIndex = allCards.length - index;
    }
  } 
}
NF Lee
  • 462
  • 3
  • 12
caro
  • 405
  • 1
  • 6
  • 18

1 Answers1

1

some hints are: Use let newCards in you function as you have to declare your variable.

Your forEach should be something like this.

newCards.forEach((card, index) => {
    ...    
});

but in order to use syntax like card.style.zIndex and allCards.length you will have to declare variable types..

For unknown models you can use something like card['style']['zIndex']

Also you have to use this to access class properties, like this.allCards

itdoesntwork
  • 1,745
  • 16
  • 31
  • Can I clarify something? According to Typescript docs, if I'm declaring variables under an "export class", then I shouldn't be using "let", and should instead just "newCards = ....". Is that true? – caro Jul 19 '18 at 21:04
  • I just made the changes that you suggested, but, to quote your username, "itdoesn'twork". – caro Jul 19 '18 at 22:00
  • 1
    to answer your `let` question, your `newCards=...` is under `initCards()` so you need to use `let`. – Mystery Jul 20 '18 at 02:59