title: How to make point "adder" button
body: <p>I am currently working on a game/app which a criteria-based point game. I using the technologies, Ionic 3 with Angular which helps with the GUI and ease of testing and deployment. </p>
  
  <p><strong>The issue I am having is :</strong> I can't get my score variable to change (go up) when the add point button is clicked. </p>
  
  <p><strong>What I have tried :</strong> Declaring it as a variable in many different ways with no avail. I'm still new to HTML and JS so any help would be appreciated. It's still super work in progress!</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;title&gt;Menu&lt;/title&gt;
    &lt;script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/dist/ionic/ionic.esm.js"&gt;&lt;/script&gt;
    &lt;script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/dist/ionic/ionic.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/css/ionic.bundle.css"/&gt;
    &lt;style&gt;
      :root {
        --ion-safe-area-top: 20px;
        --ion-safe-area-bottom: 22px;
      }
    &lt;/style&gt;
    &lt;script&gt;
  
      function openMenu() {
        document.querySelector('ion-menu-controller');
          .open();
      }
  
      function p1point(){
        var p1pp = document.getElementById("p1p")
        p1pp = p1pp + 1
  
  
      }
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;ion-app&gt;
      &lt;ion-menu side="start"&gt;
        &lt;ion-header&gt;
          &lt;ion-toolbar translucent&gt;
            &lt;ion-title&gt;Menu&lt;/ion-title&gt;
          &lt;/ion-toolbar&gt;
        &lt;/ion-header&gt;
        &lt;ion-content&gt;
          &lt;ion-list&gt;
            &lt;ion-item&gt;
              &lt;ion-icon name="home" slot="start"&gt;&lt;/ion-icon&gt;
              &lt;ion-label&gt;Home&lt;/ion-label&gt;
            &lt;/ion-item&gt;
            &lt;ion-item&gt;
              &lt;ion-icon name="person" slot="start"&gt;&lt;/ion-icon&gt;
              &lt;ion-label&gt;Profile&lt;/ion-label&gt;
            &lt;/ion-item&gt;
            &lt;ion-item&gt;
              &lt;ion-icon name="chatbubbles" slot="start"&gt;&lt;/ion-icon&gt;
              &lt;ion-label&gt;Messages&lt;/ion-label&gt;
            &lt;/ion-item&gt;
            &lt;ion-item&gt;
              &lt;ion-icon name="settings" slot="start"&gt;&lt;/ion-icon&gt;
              &lt;ion-label&gt;Settings&lt;/ion-label&gt;
            &lt;/ion-item&gt;
          &lt;/ion-list&gt;
        &lt;/ion-content&gt;
      &lt;/ion-menu&gt;
  
      &lt;div class="ion-page" main&gt;
        &lt;ion-header&gt;
          &lt;ion-toolbar&gt;
            &lt;ion-buttons slot="start"&gt;
              &lt;ion-menu-button&gt;&lt;/ion-menu-button&gt;
            &lt;/ion-buttons&gt;
            &lt;ion-title&gt;Point Game&lt;/ion-title&gt;
          &lt;/ion-toolbar&gt;
        &lt;/ion-header&gt;
        &lt;ion-content class="ion-padding"&gt;
          &lt;ion-grid&gt;
            &lt;ion-row&gt;
              &lt;ion-col&gt;
                &lt;ion-card&gt;
                  &lt;!--Player 1 score--&gt;
                  &lt;ion-card-header&gt;
                    &lt;ion-card-subtitle class = "ion-text-center"&gt;Player 1&lt;/ion-card-subtitle&gt;
                    &lt;ion-card-title class = "ion-text-center" id = "p1p"&gt;0&lt;/ion-card-title&gt;
                  &lt;/ion-card-header&gt;
                &lt;/ion-card&gt;
              &lt;/ion-col&gt;
              &lt;ion-col size = -1&gt;
                &lt;!-- fake inner thing psuedo-col--&gt;
  
              &lt;/ion-col&gt;
              &lt;ion-col&gt;
                &lt;ion-card&gt;
                  &lt;!--Player 2 score--&gt;
                  &lt;ion-card-header&gt;
                    &lt;ion-card-subtitle class = "ion-text-center"&gt;Player 2&lt;/ion-card-subtitle&gt;
                    &lt;ion-card-title class = "ion-text-center" &gt;&lt;var&gt;0&lt;/var&gt;&lt;/ion-card-title&gt;
                  &lt;/ion-card-header&gt;
                &lt;/ion-card&gt;
              &lt;/ion-col&gt;
            &lt;/ion-row&gt;
            &lt;ion-row&gt;
              &lt;ion-col&gt;
                &lt;ion-button id = "p1plus" onclick="p1point()"&gt; + &lt;/ion-button&gt;
              &lt;/ion-col&gt;
            &lt;/ion-row&gt;
          &lt;/ion-grid&gt;
  
        &lt;/ion-content&gt;
      &lt;/div&gt;
    &lt;/ion-app&gt;
    &lt;ion-menu-controller&gt;&lt;/ion-menu-controller&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>