使用Ionic3进行函数调用时出现运行时错误

Question

I am new in ionic. I have made a popover. Now I want to make tab on popover. Here I used javascript tab from www.w3schools.com. It runs but when I click a tab it shows runtime error opencity function is not defined . How can I fix that?

popover.html

<!-- Generated template for the PopoverComponent component -->
<div class="bg-image" style="height: 300px;">
<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>
</div>

popover.ts

import { Component } from '@angular/core';


@Component({
 selector: 'popover',
  templateUrl: 'popover.html'
})

export class PopoverComponent {

 text: string;

constructor() {
console.log('Hello PopoverComponent Component');
this.text = 'Hello World';
}

}

function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}

Answer 1

In popover.html have to update onclick to (click) function like:

<!-- Generated template for the PopoverComponent component -->
  <div class="bg-image" style="height: 300px;">
    <div class="tab">
      <button class="tablinks" (click)="openCity(event, 'London')">London</button>
      <button class="tablinks" (click)="openCity(event, 'Paris')">Paris</button>
      <button class="tablinks" (click)="openCity(event, 'Tokyo')">Tokyo</button>
    </div>
    ....
  </div>

And popover.ts file like this, inside PopoverComponent class:

import { Component } from '@angular/core';
@Component({ selector: 'popover', templateUrl: 'popover.html' })

export class PopoverComponent {

    text: string;

    constructor() {
        console.log('Hello PopoverComponent Component');
        this.text = 'Hello World';
    }

    openCity(evt, cityName) {
        var i, tabcontent, tablinks;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }
}