HTML of the modal:
<ion-buttons slot="end">
<ion-button color="light" id="open-modal" expand="block"> Riepilogo </ion-button>
</ion-buttons>
<ion-modal trigger="open-modal" (willDismiss)="onWillDismiss($event)">
<ng-template>
<ion-header>
<ion-toolbar style="--ion-toolbar-background: #ee7654; --border-style: ios">
<ion-buttons slot="start">
<ion-button color="light" (click)="cancel()">Indietro</ion-button>
</ion-buttons>
<ion-title>Riepilogo</ion-title>
<ion-buttons slot="end">
<ion-button color="light" (click)="confirm()" [strong]="true">Salva PDF</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-item>
<!-- <ion-label position="stacked">Codice cliente</ion-label> -->
<ion-input type="text" placeholder="Inserisci codice cliente" [(ngModel)]="name"></ion-input>
</ion-item>
<p id="pavimento"></p>
<p id="parete"></p>
<p id="illuminazione"></p>
<p id="corrimano"></p>
</ion-content>
</ng-template>
</ion-modal>
Javascript:
@ViewChild(IonModal) modal: IonModal;
name: string;
cancel() {
this.modal.dismiss(null, 'cancel');
}
confirm() {
this.modal.dismiss(this.name, 'confirm');
}
onWillDismiss(event: Event) {
const ev = event as CustomEvent<OverlayEventDetail<string>>;
if (ev.detail.role === 'confirm') {
//this.message = `Hello, ${ev.detail.data}!`;
}
}
What i want to do is using this:
const texname = "../assets/textures/" + e.target.id + ".jpg";
corrname= e.target.id;
document.getElementById('corrimano').innerHTML = corrname;
to update the text inside the modal, but it seems that the 4 IDs inside the p tags doesn’t exist until I open the modal, how can i solve this?
The error i get:
ERROR TypeError: document.getElementById(...) is null