Estou dando uma praticada em ionic 2, estou construindo um app básico para isso, com algumas funções interessantes para estudar.
Quero que, quado o usuário selecionar duas "ion-option" de dois "ion-select" diferentes, esses resultados (em números) sejam somados e mostrados no "input" ou outro elemento HTML que recomendarem.
Fiz esse código até agora sozinho:
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";
}
}
}
Sei que essa forma está errada, mas ainda não sei a certa, quero que some os valores, nesse caso, de "humanos"(2) e "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>
Se puderem ajudar, agradeço muito!