How to change the "innerHTML" of a tag using javascript and Ionic?

Question

So, I was testing here my code to make an android app for balance, I am using Ionic, but when I test the code it does not work in Ionic, but only in the browser and in normal test (like only index.html), Ionic does not work

Obs: I think javascript is loading before DOM because what is inside functions works

javascript:

<script>
document.getElementById("saldo").innerHTML = parseInt(localStorage.getItem("saldo"))
function ir(){
    const input = document.getElementById("valor").value
  const saldo = localStorage.saldo ? localStorage.saldo : localStorage.setItem("saldo", 0)

if(!input){
    return alert("Faltou preencher algo")
}

      var resolucão = parseInt(saldo ? saldo : 0) + parseInt(input)
    localStorage.setItem("saldo", parseInt(resolucão))
    document.getElementById('saldo').innerHTML = resolucão
}
function resetar(){
    localStorage.setItem("saldo", 0)
    alert('Saldo resetado')
    document.getElementById("saldo").innerHTML = 0
}
</script>

html:

<ion-content>
  <div class="ion-padding">
    <h1 id="h2">Seu saldo:</h1>
    <h2 id="saldo">0</h2>
    <h3>Quanto?</h3>
    <input type="text" id="valor"/>
    <h5>Pronto, agora para terminar, é so clicar em ir</h5>
    <button id="butao" onclick="ir()">Ir</button>
    <button onclick="resetar()">Resetar</button>
  </div>
</ion-content>

thanks in advance

Answer 1

Unlike web development, Ionic has its dependencies, and has Javascript support but using angular is more appropriate.

<ion-content>
  <div class="ion-padding">
     <h1 id="h2">Seu saldo:</h1>
     <h2 id="saldo">{{saldo}}</h2>
     <h3>Quanto?</h3>
     <ion-item>
        <ion-label position="floating">Valor</ion-label>
        <ion-input type="text" [(ngModel)]="valor"></ion-input>
     </ion-item>    
     <h5>Pronto, agora para terminar, é so clicar em ir</h5>
     <ion-button color="primary" (click)="ir()">Ir</ion-button>
     <ion-button color="primary" (click)="resetar()">Resetar</ion-button>  
  </div>
</ion-content>

In the angular file in the home.page.ts file

import { Component } from '@angular/core';
import { AlertController } from '@ionic/angular';
import { Storage } from '@ionic/storage';//Biblioteca de storage do 

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(
public alertController: AlertController, //Instâncias do alert do ionic
private storage: Storage, //Instância do storage do ionic
  ) 
  { 
(this.storage.get('saldo')) ? this.storage.get('saldo').then((val) =>{this.saldo = val}) : this.storage.set('saldo', '0');
  }

  saldo: any = 0; //Variavel de saldo
  valor: any; // Variavel de valor
  resolução: any;
  ir() {
if (!this.valor) {
  this.alert('Faltou preencher algo.');
} else {
  this.resolução = parseInt(this.saldo ? this.saldo : 0) + parseInt(this.valor);
  this.storage.set('saldo', this.resolução);
  this.saldo = this.resolução;
}
  }

  resetar() {
this.storage.remove('saldo');
this.alert('Saldo resetado');
this.saldo = 0;
  }

  async alert(texto) {
const alert = await this.alertController.create({
  header: 'Alert',
  message: texto,
  buttons: ['OK']
});
await alert.present();
  }

}

to learn more about Ionic Storage is at this documentation link https://ionicframework.com/docs/building/storage