Gauge buttons not working

     <div class="page" data-name="Appreciation">
         <!-- Top Navbar -->
        <div class="navbar navbar-large">
          <div class="navbar-bg"></div>
          <div class="navbar-inner">`// base template for pages across app
             <div class="left">
            <a href="/home/" class="link back">
              <i class="icon icon-back"></i>
              <span class="if-not-md">Back</span>
            <div class="title sliding">Appreciation Entry & Mood Tracker</div>
            <div class="title-large">
              <div class="title-large-text">Appreciation Entry & Mood Tracker</div>
 // where the gauge starts      

        <div class="page-content"> 
                <div class="block-title">Mood Tracker</div>
                    <div class="block block-strong text-align-center">
                        <div class="gauge demo-gauge" ></div>   
                        <p>How happy are you feeling today?</p>
                              <div class="gauge gauge-init" id ="demo-gauge"
                        <p class="segmented segmented-raised"> // buttons for the gauge
                          <a href="#" class="button" data-value="0">0%</a>
                          <a href="#" class="button" data-value="25">25%</a>
                          <a href="#" class="button" data-value="50">50%</a>
                          <a href="#" class="button" data-value="75">75%</a>
                          <a href="#" class="button" data-value="100">100%</a>

// slider for sadness mood tracker

                    <div><p class="text-align-center">How sad are you feeling today?</p></div>
                  <div class="item-input-wrap">
                    <div class="range-slider range-slider-init" id = "slider1" data-label="true">
                      <input type="range" value="50" min="0" max="100" step="1" />
        // code for the entry editor

          <div class="block block-strong">
            <div class="block-title">Entry Editor</div>
            <div> // explaining to the user what this page is for
                    <p>The aim for this editor is to write a few things you appreicate about yourself everyday. You can also use it to write a little entry about what has happened throughout your day. It's a place for writing positive thoughts and appreications in your life.</p>

            // setting up the text editor 

                <div class="text-editor text-editor-init" class ="resizbale"type="text" name="entry" id="entry" placeholder="Enter your appreication thoughts here..." action="send-here.html" method="GET" class = "form-ajax-submit-onchange" ><link href="|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet"></div>

                // setting up the save, delete and get buttons for user interaction with the entry

                    <div class="col-30">
                        <p><a href="#" class="button button-raised button-fill get-storage-data" >Get Entry</a></p>
                    <div class="col-30">
                        <p><a href="#" class="button button-raised button-fill delete-storage-data">Delete Entry</a></p>
                    <div class="col-30">
                        <p><a href="#" class="button button-raised button-fill save-storage-data">Save Entry</a></p>
    <script type = "text/javascript" 
             src = ""></script>
         var myApp = new Framework7();  
         var $ = Dom7
         // functionality for saving, deleting and getting the entry the user has written.
         $('.get-storage-data').on('click', function() {
        var storedData = myApp.formGetData('entry');
        if(storedData) {
        else {
            window.alert('There is no stored data for this entry yet. Try to enter some text.')
        $('.delete-storage-data').on('click', function() {
          var storedData = myApp.formDeleteData('entry');
          window.alert('Form data deleted')
        $('.save-storage-data').on('click', function() {
          var storedData = myApp.formStoreData('entry', {
          window.alert('Entry data replaced, refresh app to see changes')
         // fucntionality for text editor and buttonss
         var textEditor = app.textEditor.create({
          el: '.my-text-editor',
          customButtons: {
            // property key is the button id
            hr: {
              // button html content
              content: '&lt;hr&gt;',
              // button click handler
              onClick(event, buttonEl) {
                document.execCommand('insertHorizontalRule', false);
          // now we use custom button id "hr" to add it to buttons
          buttons: [["bold", "italic", "underline", "strikeThrough"], "hr"],
// create method for the gauge
         var gauge = myApp.gauge.create({  
            el: '.demo-gauge',
            type: 'circle',
            value: 0.5,
            size: 250,
            borderColor: '#2196f3',
            borderWidth: 10,
            valueText: '50%',
            valueFontSize: 41,
            valueTextColor: '#2196f3',
            labelText: 'amount of something',

   // Change  gauge on button click          
            myApp('.button').on('click', function () { 
            var value = myApp(this).attr('data-value');
              value: value / 100,
              valueText: value + '%'

I’m working on a project and I’m trying to use a gauge to track how happy a user is. I’m using the gauge docs to get my code for now but I can’t figure out why the buttons don’t work to display the chosen % on the gauge.

Try changing
myApp('.button').on('click', function () {

$('.button').on('click', function () {

Nope, still nothing.