如何制作点“加法器”按钮答案

【问题标题】：How to make point "adder" button如何制作点“加法器”按钮
【发布时间】：2020-01-30 14:29:39
【问题描述】：

我目前正在开发一款基于标准的积分游戏的游戏/应用程序。我使用 Ionic 3 和 Angular 技术，它有助于 GUI 和易于测试和部署。

我遇到的问题是：单击添加点按钮时，我无法更改（上升）我的分数变量。

我尝试过的： 以多种不同的方式将其声明为变量但无济于事。我还是 HTML 和 JS 的新手，所以任何帮助都将不胜感激。它仍在进行中！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Menu</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")
      p1pp = p1pp + 1


    }
  </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" ><var>0</var></ion-card-title>
                </ion-card-header>
              </ion-card>
            </ion-col>
          </ion-row>
          <ion-row>
            <ion-col>
              <ion-button id = "p1plus" onclick="p1point()"> + </ion-button>
            </ion-col>
          </ion-row>
        </ion-grid>

      </ion-content>
    </div>
  </ion-app>
  <ion-menu-controller></ion-menu-controller>


</body>
</html>

【问题讨论】：

标签： javascript html angular ionic-framework

【解决方案1】：

您的代码有一些语法错误：

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
    }

【讨论】：

我实现了您的建议，并且它适用于添加，但是当我现在想删除一个点时，出现了一个“Nan”框。原谅我的
@JustinMoon-exe NaN 表示Not a Number。您确定innerText 只包含数字而不包含其他字符吗？