why is my function evaluating to null?

[QMark]

I started this project again from scratch, because my first attempt is complete junk and I want to do this right from the start.

I apologize for making another thread about this project, but the previous attempt I made absolutely failed and was complete garbage and I figured the right thing to do would be to start this project from scratch and so I hope I did a good job of asking a different question about my project.

So when I run this code I notice none of the functions run:

Code:

$(function() { // Makes sure that your function is called once all the DOM elements of the page are ready to be used.
   
    // Called function to update the name, happiness, and weight of our pet in our HTML
    checkAndUpdatePetInfoInHtml();
 
    // When each button is clicked, it will "call" function for that button (functions are below)
    $('.treat-button').click(clickedTreatButton);
    $('.play-button').click(clickedPlayButton);
    $('.exercise-button').click(clickedExerciseButton);
 

 
   
  })
 
    // Add a variable "pet_info" equal to a object with the name (string), weight (number), and happiness (number) of your pet
    var pet_info = {name:"Ryan", weight:"0", happiness:"0"};
 
    function clickedTreatButton() {
      // Increase pet happiness
      // Increase pet weight
      document.getElementById('happiness').innerText = parseInt(document.getElementById('happiness').innerText) + 1;
      document.getElementById('weight').innerText = parseInt(document.getElementById('weight').innerText) + 1;
      console.log("this code runs");
      checkAndUpdatePetInfoInHtml();
    }
   
    function clickedPlayButton() {
      // Increase pet happiness
      // Decrease pet weight
      document.getElementById('happiness').innerText = parseInt(document.getElementById('happiness').innerText) + 1;
      document.getElementById('weight').innerText = parseInt(document.getElementById('weight').innerText) - 1;
      console.log("this code runs");
      checkAndUpdatePetInfoInHtml();
    }
   
    function clickedExerciseButton() {
      // Decrease pet happiness
      // Decrease pet weight
      document.getElementById('happiness').innerText = parseInt(document.getElementById('happiness').innerText) - 1;
      document.getElementById('weight').innerText = parseInt(document.getElementById('weight').innerText) - 1;
      console.log("this code runs");
      checkAndUpdatePetInfoInHtml();
    }
 
    function checkAndUpdatePetInfoInHtml() {
      checkWeightAndHappinessBeforeUpdating(); 
      updatePetInfoInHtml();
    }
   
    function checkWeightAndHappinessBeforeUpdating() {
      // Add conditional so if weight is lower than zero, set it back to zero
    }
   
    // Updates your HTML with the current values in your pet_info dictionary
    function updatePetInfoInHtml() {
      $('.name').text(pet_info['name']);
      $('.weight').text(pet_info['weight']);
      $('.happiness').text(pet_info['happiness']);
    }
 

When I run it in my debugger, here's what I get:

Code:

TypeError: document.getElementById(...) is null2 [url=https://homework-9.glitch.me/script.js]script.js:22:74[/url]
    clickedTreatButton https://homework-9.glitch.me/script.js:22
    jQuery 2
    
    dispatch
    
    handle

So my question is why are all of my functions evaluating to null?

Thanks.