why is my function evaluating to null?
#1
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.
Reply


Messages In This Thread
why is my function evaluating to null? - by QMark - 04-05-2020, 10:34 PM

Possibly Related Threads…
Thread Author Replies Views Last Post
  how to split this JS function into smaller ones of make function work? QMark 0 14,277 05-01-2020, 10:58 PM
Last Post: QMark
  why doesn't the howOld() function work? QMark 8 29,565 04-05-2020, 01:37 AM
Last Post: QMark
  Why learn PHP? Syntax 2 23,483 12-05-2015, 03:34 PM
Last Post: Syntax