Sum of <select> values inserted in <input>

Question

I am giving a practiced in Ionic 2, I am building a basic app for this, with some interesting functions to study.

I want when the user selects two "ion-option" from two different "ion-select", these results (in numbers) are summed and shown in the "input" or other HTML element they recommend.

I made that code so far alone:

export class HomePage {
  public racas:string;
  teste() {
      if (this.racas == "humanos") {
        (<HTMLInputElement>document.getElementById("pv")).innerHTML = "2";
      }else if (this.racas =="anoes") {
        (<HTMLInputElement>document.getElementById("pv")).innerHTML = "0";
      }
  }

  public classes:string;
  pontosVida() {
    if (this.classes == "barbaro") {
      (<HTMLInputElement>document.getElementById("pv")).innerHTML = "3";
    }else if (this.racas =="anoes") {
        (<HTMLInputElement>document.getElementById("pv")).innerHTML = "0";
      }
  }
}

I know that this form is wrong, but I still do not know the right one, I want to add the values, in this case, of "humans"(2) and "barbaro"(3).

HTML

<ion-list>
    <ion-item>
     <ion-label>Classe</ion-label>
       <ion-select id="classes" [(ngModel)]="classes" (ionChange)="pontosVida();">
         <ion-option value="barbaro">Bárbaro</ion-option>
         <ion-option value="bardo">Bardo</ion-option>
         <ion-option value="clerigo">Clérigo</ion-option>
         <ion-option value="druida">Druida</ion-option>
         <ion-option value="feiticeiro">Feiticeiro</ion-option>
         <ion-option value="guerreiro">Guerreiro</ion-option>
         <ion-option value="ladino">Ladino</ion-option>
         <ion-option value="mago">Mago</ion-option>
         <ion-option value="monge">Monge</ion-option>
         <ion-option value="paladino">Paladino</ion-option>
         <ion-option value="ranger">Ranger</ion-option>
       </ion-select>
    </ion-item>
  </ion-list>

  <ion-list>
   <ion-item>
    <ion-label>Raças</ion-label>
      <ion-select id="racas" [(ngModel)]="racas" (ionChange)="teste();">
        <ion-option value="humanos">Humanos</ion-option>
        <ion-option value="anoes">Anões</ion-option>
        <ion-option value="elfos">Elfos</ion-option>
        <ion-option value="gnomos">Gnomos</ion-option>
        <ion-option value="meio-elfos">Meio-elfos</ion-option>
        <ion-option value="meio-orcs">Meio-orcs</ion-option>
        <ion-option value="halfling">Halfling</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>

  <ion-row class="colunas-principais">
    <ion-col width-33>
      <ion-list>
        <ion-item text-center>
          <ion-input id="ca" type="text" name="ca"></ion-input>
          <ion-label stacked>CA</ion-label>
        </ion-item>
      </ion-list>
    </ion-col>

    <ion-col width-33>
      <ion-list>
        <ion-item text-center>
          <ion-input id="pv" type="text" [value]="pontos"></ion-input>
          <ion-label stacked>PV</ion-label>
        </ion-item>
      </ion-list>
    </ion-col>

    <ion-col width-33>
      <ion-list>
        <ion-item text-center>
          <ion-input type="text"></ion-input>
          <ion-label stacked>IN</ion-label>
        </ion-item>
      </ion-list>
    </ion-col>
  </ion-row>

If you can help, I’d really appreciate it!

Answer 1

Do not access/manipulate the DOM directly, this can cause problems of security guard. For this, use the decorator @ViewChild or a bind through the directive [(ngModel)]:

html:

<ion-header>
  <ion-navbar>
    <ion-title>Stack</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
<ion-list>
    <ion-item>
     <ion-label>Classe</ion-label>
       <ion-select id="classes" [(ngModel)]="classes" (ionChange)="pontosVida();">
         <ion-option value="barbaro">Bárbaro</ion-option>
         <ion-option value="bardo">Bardo</ion-option>
         <ion-option value="clerigo">Clérigo</ion-option>
         <ion-option value="druida">Druida</ion-option>
         <ion-option value="feiticeiro">Feiticeiro</ion-option>
         <ion-option value="guerreiro">Guerreiro</ion-option>
         <ion-option value="ladino">Ladino</ion-option>
         <ion-option value="mago">Mago</ion-option>
         <ion-option value="monge">Monge</ion-option>
         <ion-option value="paladino">Paladino</ion-option>
         <ion-option value="ranger">Ranger</ion-option>
       </ion-select>
    </ion-item>
  </ion-list>

  <ion-list>
   <ion-item>
    <ion-label>Raças</ion-label>
      <ion-select id="racas" [(ngModel)]="racas" (ionChange)="teste();">
        <ion-option value="humanos">Humanos</ion-option>
        <ion-option value="anoes">Anões</ion-option>
        <ion-option value="elfos">Elfos</ion-option>
        <ion-option value="gnomos">Gnomos</ion-option>
        <ion-option value="meio-elfos">Meio-elfos</ion-option>
        <ion-option value="meio-orcs">Meio-orcs</ion-option>
        <ion-option value="halfling">Halfling</ion-option>
      </ion-select>
    </ion-item>
  </ion-list>

  <ion-row class="colunas-principais">
    <ion-col width-33>
      <ion-list>
        <ion-item text-center>
          <ion-input id="ca" type="text" name="ca"></ion-input>
          <ion-label stacked>CA</ion-label>
        </ion-item>
      </ion-list>
    </ion-col>

    <ion-col width-33>
      <ion-list>
        <ion-item text-center>
          <ion-input id="pv" type="text" [(ngModel)]="pv" [value]="pontos"></ion-input>
          <ion-label stacked>PV</ion-label>
        </ion-item>
      </ion-list>
    </ion-col>

    <ion-col width-33>
      <ion-list>
        <ion-item text-center>
          <ion-input type="text"></ion-input>
          <ion-label stacked>IN</ion-label>
        </ion-item>
      </ion-list>
    </ion-col>
  </ion-row>
</ion-content>

ts:

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

@Component({
  selector: 'page-home',
  templateUrl: 'pages/home/home.html'
})
export class HomePage {

  public racas:string;
  public classes:string;


  public pv: number = 0;
  public pvRaca: number = 0;
  public pvClasse: number = 0;

  teste() {

    switch(this.racas) {
      case 'humanos':
        this.pvRaca = 2;
        break;
      default:
        this.pvRaca = 0;
        break;
    }

    this.calculaPV();
  }

  pontosVida() {
    switch(this.classes) {
      case 'barbaro':
        this.pvClasse = 3;
        break;
      default:
        this.pvClasse = 0;
        break;
    }

    this.calculaPV();
  }


  calculaPV() {
    this.pv = this.pvRaca + this.pvClasse;
  }


}

See on plnkr