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:
When I run it in my debugger, here's what I get:
So my question is why are all of my functions evaluating to null?
Thanks.
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.