How to select HTML/ionic element in js?

Ionic Framework ionic-v3
3

So without knowing your code for sessions, say you have something like this where your sessions include the color you want to change the card to:

sessions = [
  {
    id: 1,
    color: "blue"
  },
  {
    id: 2,
    color: "pink"
  },
  {
    id: 3,
    color: "lightblue"
  },
  {
    id: 4,
    color: "red"
  },
  {
    id: 5,
    color: "hotpink"
  },
];

Then you have cards like this (further simplified):

<ion-card #scheduleCard class="schedule-card" *ngFor="#session of sessions">
  <ion-card-content class="content">
    <button ion-item (click)="changeCardColor(session, scheduleCard)">Change color</button>
  </ion-card-content>
</ion-card>

Where the current session is passed to the changeCardColor function, along with #scheduleCard which refers to the ion-card element itself. So then the changeCardColor function could be something like this:

changeCardColor(session, scheduleCard) {
  scheduleCard.style.backgroundColor = session.color;
}

Does that help?

2 Likes