I am working on a point-based question game within Ionic 5 using Angular. I asked previously on how to make the addition button work as intended, and it worked great, but now when trying to use the same methods for point subtraction, I get a "Nan" box.
I have tried to rework my GUI to see if the problem is on that side, but nothing changed.
I am a super beginner at Ionic and HTML in general so my code will probably be pretty garbage. Any help would be great!
Below is the code before any of my modifications.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Point Game</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/css/ionic.bundle.css"/>
<style>
:root {
--ion-safe-area-top: 20px;
--ion-safe-area-bottom: 22px;
}
</style>
<script>
function openMenu() {
document.querySelector('ion-menu-controller').open();
}
function p1point(){
var p1pp = document.getElementById("p1p").innerText; //getting text inside element
p1pp = parseInt(p1pp) + 1; //Increment
document.getElementById("p1p").innerHTML = p1pp; // Writing values
}
function p2point(){
var p2pp = document.getElementById("p2p").innerText; //getting text inside element
p2pp = parseInt(p2pp) + 1; //Increment
document.getElementById("p2p").innerHTML = p2pp; // Writing values
}
function p1minus(){
var p1mm = document.getElementById("p1min").innerText; //getting text inside element
p1mm = parseInt(p1mm) - 1; //Increment
document.getElementById("p1min").innerHTML = p1mm; // Writing values
}
function p2minus(){
var p2mm = document.getElementById("p2min").innerText; //getting text inside element
p2mm = parseInt(p2mm) - 1; //Increment
document.getElementById("p2min").innerHTML = p2mm; // Writing values
}
</script>
</head>
<body>
<ion-app>
<ion-menu side="start">
<ion-header>
<ion-toolbar translucent>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>
<ion-icon name="home" slot="start"></ion-icon>
<ion-label>Home</ion-label>
</ion-item>
<ion-item>
<ion-icon name="person" slot="start"></ion-icon>
<ion-label>Profile</ion-label>
</ion-item>
<ion-item>
<ion-icon name="chatbubbles" slot="start"></ion-icon>
<ion-label>Messages</ion-label>
</ion-item>
<ion-item>
<ion-icon name="settings" slot="start"></ion-icon>
<ion-label>Settings</ion-label>
</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<div class="ion-page" main>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-menu-button></ion-menu-button>
</ion-buttons>
<ion-title>Point Game</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-grid>
<ion-row>
<ion-col>
<ion-card>
<!--Player 1 score-->
<ion-card-header>
<ion-card-subtitle class = "ion-text-center">Player 1</ion-card-subtitle>
<ion-card-title class = "ion-text-center" id = "p1p">0</ion-card-title>
</ion-card-header>
</ion-card>
</ion-col>
<ion-col size = -1>
<!-- fake inner thing psuedo-col-->
</ion-col>
<ion-col>
<ion-card>
<!--Player 2 score-->
<ion-card-header>
<ion-card-subtitle class = "ion-text-center">Player 2</ion-card-subtitle>
<ion-card-title class = "ion-text-center" id = "p2p">0</ion-card-title>
</ion-card-header>
</ion-card>
</ion-col>
</ion-row>
<ion-row>
<ion-col width-50 style = "text-align: right">
<ion-button id = "p1plus" onclick="p1point()" > + </ion-button>
</ion-col>
<ion-col size = .15>
<!-- fake inner thing psuedo-col-->
</ion-col>
<ion-col width-50 style = "text-align: right">
<ion-button id = "p2plus" onclick="p2point()"> + </ion-button>
</ion-col>
<ion-col size = -3>
<!-- fake inner thing psuedo-col-->
</ion-col>
</ion-row>
</ion-row>
<ion-row>
<ion-col width-50 style = "text-align: right">
<ion-button id = "p1min" onclick="p1minus()" > - </ion-button>
</ion-col>
<ion-col size = .15>
<!-- fake inner thing psuedo-col-->
</ion-col>
<ion-col width-50 style = "text-align: right">
<ion-button id = "p2min" onclick="p2minus()"> - </ion-button>
</ion-col>
<ion-col size = -3>
<!-- fake inner thing psuedo-col-->
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
</div>
</ion-app>
<ion-menu-controller></ion-menu-controller>
</body>
</html>
I think the problem of your minus functions is that you are getting the innerText of the buttons. You are using p1min and p2min ids, and those texts are not numbers. That is why you are getting NaN.