how do I add to or subtract from a value in JavaScript?
#1
So I can't help thinking that I'm repeating some sort of fatal syntax error and I am wondering if I'm even doing the right thing with this assignment. Before I begin, please don't do my work for me while helping me because I don't plagiarize and I cannot use someone else's code. What I'm looking for is for someone to help me land upon the right code, not for someone to give it to me.

What I'm looking for is a way to increase or decrease those numbers and right now the numbers don't even show up in the output.

How to I get the numbers to show up in the output and am I getting adding and subtracting values from parsed integers right?

Any other advice would also be appreciated. I'm looking to learn so please don't do everything for me.

Here is the assignment:

Quote:CIT 384 Project Gigapet JavaScript
Purpose : In this project you are going to create the functionality and UI for a simple Giga Pet
game.
Requirements : To complete this project you will add to the starter code provided. You may use
glitch or any editor that you prefer. For this project you can use the JQuery library. You may edit
the structure of the provided HTML and CSS to better fit your preferred style. You may use
lecture slides and the past hw’s for sample code but make sure to make it your own.
The purpose of this project is to make sure you have an understanding of JavaScript arrays,
objects, click events on an element, and how to change properties in elements.
Functionality:






Create a pet_info object with keys "name", "weight", "happiness" and set initial values.
Set this equal to variable "pet_info"
Add behavior to buttons When your pet receives a treat, add to its happiness and
weight. When your pet exercises, reduce it's happiness and weight. When your pet
plays, add to its happiness and reduce its weight
Fix key bug to make sure keys can't go below zero (use conditional)
Add a new action (button, key in pet_info, in HTML)
Add a new behavior that correlates with the new button you added. You can add it below
the happiness.
Add a notification after each button press with a comment from your pet.
What I will be grading on:
Implementation of all the functionality. JavaScript, HTML and CSS has proper formatting and
comments where appropriate. Web page renders properly in Chrome. Any assets are included
in submission.
Extra Credit:
Add animations and/or sound effects to your pet when certain conditions occur. Any other ideas
for extra credit can be discussed in Canvas.

Here is the JavaScript code:

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:"My Pet Name", weight:"100", happiness:"100"};
 
    function clickedTreatButton() {

      if document.getElementByClass("treat-button").clicked(){
      // Increase pet happiness
        parseInt(pet_info.getValue(1)) = parseInt(pet_info.getValue(1)) + 2;
      // Increase pet weight

      }

      checkAndUpdatePetInfoInHtml();
    }
   
    function clickedPlayButton() {
      if document.getElementByClass("play-button").clicked(){
      // Increase pet happiness
        parseInt(pet_info.getValue(1)) = parseInt(pet_info.getValue(1)) + 3;
      // decrease pet weight
      parseInt(pet_info.getValue(2)) = parseInt(pet_info.getValue(2)) - 1;       
      }
      checkAndUpdatePetInfoInHtml();
    }
   
    function clickedExerciseButton() {
      if document.getElementByClass("exercise-button").clicked(){
      // Decrease pet happiness
        parseInt(pet_info.getValue(1)) = parseInt(pet_info.getValue(1)) - 2;
      // Decrease pet weight
        parseInt(pet_info.getValue(2)) = parseInt(pet_info.getValue(2)) - 3;
            }
      checkAndUpdatePetInfoInHtml();
    }
 
    function checkAndUpdatePetInfoInHtml() {
      checkWeightAndHappinessBeforeUpdating();
      updatePetInfoInHtml();
    }
   
    function checkWeightAndHappinessBeforeUpdating() {
      // Add conditional so if weight is lower than zero, set it back to zero
      if pet_info.getValue(1).parseInt() < 0 {
        pet_info.getValue(1).parseInt() = 0;
      }
    }
   
    // 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']);
    }

I have to be doing something wrong because its not the behavior I expected.

Here's the HTML:

Code:
<!DOCTYPE html>
<html>
  <head>
    <title>Your Giga Pet</title>
    <meta name="description" content="A cool thing made with Glitch">
    <link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="script.js" defer></script>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <h1>
        This is your Giga Pet
      </h1>
    </header>

    <main>
      <section class="pet-image-container">
         <!-- Replace pet image with your own pet image -->
        <img class="pet-image" src="https://cdn.glitch.com/3aa98e05-3216-497c-a251-210ae4713a83%2Fhound.jpg?1541715339220">
      </section>
      <section class="dashboard">
        <div>Name: <strong><span class="name">Ryan</span></strong></div>
        <div>Weight: <strong><span class="weight"></span> pounds</strong></div>
        <div>Happiness: <strong><span class="happiness"></span> tail wags (per min)</strong></div>
        <div class="button-container">
          <button class="treat-button">
            Treat
          </button>
          <button class="play-button">
            Play
          </button>
          <button class="exercise-button">
            Exercise
          </button>
        </div>
      </section>
    </main>

    <!-- Your web-app is https, so your scripts need to be too -->
    <script src="https://code.jquery.com/jquery-2.2.1.min.js"
            integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00="
            crossorigin="anonymous"></script>
  </body>
</html>

and here's the CSS:

Code:
* {
    box-sizing: border-box;
  }
 
  body {
    font-family: helvetica, arial, sans-serif;
    margin: 25px;
  }
 
  main {
    display:block;
    height:175px;
  }
 
  header {
    border-bottom: 1px solid black;
  }
 
  h1 {
    font-weight: bold;
    color: #000;
  }
 
  .bold {
    font-weight: bold;
  }
 
  p {
    max-width: 600px;
  }
 
 
  li {
    margin-bottom: 5px;
  }
 
  footer {
    padding-top: 25px;
    border-top: 1px solid black;
  }
 
  footer a {
    float:left;
    margin:5px;
  }
 
  .pet-image {
    height:250px;
  }
 
  .dashboard div {
    display:block;
  }
 
  .pet-image-container {
    float:left;
    padding:10px;
  }
 
  .dashboard {
    float:left;
    padding:20px;
  }
 
  .button-container {
    margin-top:20px;
  }
 
  .button-container button {
    width: 100px;
      margin-right: 10px;
      text-align: center;
      display: inline-block;
      float: left;
    font-size:15px;
    background-color: #1e2835;
    border-color: #404853;
    cursor:pointer;
    background-image: linear-gradient(to bottom,rgba(246,246,246,.1)0%,rgba(30,40,53,0)66%);
    color: #fafafa;
  }
Reply
#2
When asking for programming help, it's best to be very specific. Stating explicitly what function isn't work, as well as describing your expected result, compared to actual result.

Also - do you know how to use the Chrome Developer tools? (I assume Firefox would have something similar, but I don't use it so not sure how it works). In Chrome, if you right click on a page and select inspect, and then select the console tab - you should see any Javascript errors that are popping up.

You can then use that information to research what might be causing the problem. I did exactly this and found 2 different syntactical errors (though they were repeated, so there was like 5 errors), before logic/incomplete programming issues started popping up and I didn't wanna have to start writing code lol.

You can also use an online validator like https://esprima.org/demo/validate.html to troubleshoot simple stuff like this.
Reply
#3
(03-28-2020, 07:02 AM)MuddyBucket Wrote: When asking for programming help, it's best to be very specific. Stating explicitly what function isn't work, as well as describing your expected result, compared to actual result.

Also - do you know how to use the Chrome Developer tools? (I assume Firefox would have something similar, but I don't use it so not sure how it works). In Chrome, if you right click on a page and select inspect, and then select the console tab - you should see any Javascript errors that are popping up.

You can then use that information to research what might be causing the problem. I did exactly this and found 2 different syntactical errors (though they were repeated, so there was like 5 errors), before logic/incomplete programming issues started popping up and I didn't wanna have to start writing code lol.

You can also use an online validator like https://esprima.org/demo/validate.html to troubleshoot simple stuff like this.

Thanks MuddyBucket. I will do that. I just wanna get the current errors out of the way before I add in even more code.

I also have problems outlining the different portions of the assignment.

If I could get help outlining the assignment, that would be great too.
Reply
#4
For javascript I found the mozilla web docs very informative, specially as it has a section for common errors and explains everything with examples.
https://developer.mozilla.org/en-US/docs/Web/JavaScript

Check it out, it might help you debug your code.
You said you needed help "outlining the assignment", what does that even mean?
Reply
#5
(03-28-2020, 11:09 PM)enmafia2 Wrote: For javascript I found the mozilla web docs very informative, specially as it has a section for common errors and explains everything with examples.
https://developer.mozilla.org/en-US/docs/Web/JavaScript

Check it out, it might help you debug your code.
You said you needed help "outlining the assignment", what does that even mean?

I misphrased what I meant. I don't want someone to just give pseudo-code because that would be cheating. What I mean is I need help understanding what it is I need to do in terms of logic. I updated my code a little bit but none of the if-statements I typed in actually run because I just used alert functions since I posted the OP and it didn't actually work. So how do I modify my code to get it to run those if-statements when I click that button? I don't want someone to do it for me. I want someone to help guide me in the right direction so I can figure it out a little quicker because I'm having a hard time figuring it out.

So that's why I'm confused.
Reply
#6
(03-29-2020, 02:24 AM)QMark Wrote: I misphrased what I meant. I don't want someone to just give pseudo-code because that would be cheating. What I mean is I need help understanding what it is I need to do in terms of logic. I updated my code a little bit but none of the if-statements I typed in actually run because I just used alert functions since I posted the OP and it didn't actually work. So how do I modify my code to get it to run those if-statements when I click that button? I don't want someone to do it for me. I want someone to help guide me in the right direction so I can figure it out a little quicker because I'm having a hard time figuring it out.

So that's why I'm confused.

I feel like you're still trying to run before you walk.

Start with learning the structure of an if statement. For example, start with:

Code:
if document.getElementByClass("treat-button").clicked(){}

Does this work? No cause it's syntactically incorrect. How about:

Code:
if x{}

Does this work? No cause it's syntactically incorrect. I've reduced your code to 5 characters, and the error you have is still present. HOW you type things out matters. 

Here's a tutorial on how to write if statements in javascript: https://www.w3schools.com/js/js_if_else.asp

Try to get my code "if x=1 {}" to work. Then you might have an idea on why yours isn't. Learn to use the debugger I mentioned previously. It will tell you errors. They may not always be clear, but that's what google is for. Reduce things to their base components.

Also, learn the difference between syntax errors, and logic errors. Syntax errors are because you wrote something that the computer didn't understand. Logic errors the computer understands, but outputs unexpected results because you didn't ask it to something correctly. Right now your errors are syntax errors. You're not writing code that the computer understands. So if the error pops up in an if statement, go look at a tutorial on if statements.
Reply