I'm giving a practiced ionic 2, I'm building a basic app for this, with some interesting functions to study.
I want the user to select two "ion-options" from two different ion-selects, these results (in numbers) are summed and shown in the "input" or other HTML element they recommend.
I've done this 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 it to add values in this case to "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, thank you very much!