Uncaught Referenceerror: vira1 is not defined

Question

I’m creating a function but when it’s called it says it hasn’t been defined yet, what would be the reason ?

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-jogomemoria',
  templateUrl: 'jogomemoria.html',
})
export class JogomemoriaPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

 
}
function vira1(){
	document.getElementById("vira0").style.zIndex = "999";
}

<ion-header>
</ion-header>


<ion-content padding class="bgcMemoria">
  <div class="fase1">
    <div class="viradasBaixo">
      <img src="assets/img/carta.jpg" id="viradaBaixo1" onclick="vira1()">
    </div>
    <div class="viradasCima" id="viradasCima">
      <img src="assets/img/virada.jpg" id="vira0"></img>
    </div>
  </div>
</ion-content>

Answer 1

From the Angular 2 to make Binding of events are used parentheses, every time you want to call an event do (evento)="exeFuncao()"

Some events:

(focus)="exeFuncao()"
(blur)="exeFuncao()"

(submit)="exeFuncao()"

(scroll)="exeFuncao()"

(cut)="exeFuncao()"
(copy)="exeFuncao()"
(paste)="exeFuncao()"

(keydown)="exeFuncao()"
(keypress)="exeFuncao()"
(keyup)="exeFuncao()"

(mouseenter)="exeFuncao()"
(mousedown)="exeFuncao()"
(mouseup)="exeFuncao()"

(click)="exeFuncao()"
(dblclick)="exeFuncao()"

(drag)="exeFuncao()"
(dragover)="exeFuncao()"
(drop)="exeFuncao()"

You can see the complete list in this article on the site of Mozilla.

Another mistake is that your method vira1 is out of class JogomemoriaPage then it won’t work.

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
    selector: 'page-jogomemoria',
    templateUrl: 'jogomemoria.html',
})
export class JogomemoriaPage {
    constructor(public navCtrl: NavController, public navParams: NavParams) {
    }
    vira1(){
        document.getElementById("vira0").style.zIndex = "999";
    }
}