1

I've been given an assignment to create an external JavaScript code file to correspond to an HTML code file already created by my instructors:

I'm supposed to make the buttons listed in the HTML code change a box graphic: "button1" to grow the box; "button2" to make the box blue; "button 3" to make the color of the box fade away; and "button4" to reset the box to its original size and color.

$("#button1").on("click", function() {
  $("#box").animate({
      height: "+=50px",
      width: "+=50px"
    },
    "fast");

});

$("#button2").on("click", function() {
  $("#box").animate().css({
    backgroundColor: "blue"
  });

});

$("#button3").on("click", function() {
  $("#box").fadeOut();

});

$("#button4").on("click", function() {
  $("#box").fadeIn("fast").animate({
      height: "150px",
      weight: "150px"
    },
    "fast").css({
    backgroundColor: "orange"
  });

})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Jiggle Into JavaScript</title>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js">
  </script>
</head>

<body>

  <p>Press the buttons to change the box!</p>

  <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>

  <button id="button1">Grow</button>
  <button id="button2">Blue</button>
  <button id="button3">Fade</button>
  <button id="button4">Reset</button>


</body>

</html>

I'm reading all kinds of conflicting ways to create this JavaScript code. Am I missing the "getElementById" function to make these buttons work? Or some other function?

halfer
  • 19,824
  • 17
  • 99
  • 186
Andrew Rea
  • 138
  • 10
  • Seems to be mostly working. You just have a syntax error at your Javascript code when declaring `backgroundColor: "orange"` (removed the `;` at the end). Only the reset might have some issue regarding resetting it to the original size – Andreas Mar 01 '19 at 03:05
  • Ha! One little semicolon and it all goes kablooey! Thanks, @Andreas! Perhaps to "reset" the box to its original size, I should add the "margin: 25px"? – Andrew Rea Mar 01 '19 at 03:11
  • A suggestion to prevent that, you might want to use linter or any syntax checker to check your code syntax while you're writing it. Also, make use of [debugger](https://stackoverflow.com/questions/25385173/what-is-a-debugger-and-how-can-it-help-me-diagnose-problems) for that or look at [How to debug small programs](https://ericlippert.com/2014/03/05/how-to-debug-small-programs/). – Andreas Mar 01 '19 at 03:13

1 Answers1

0

Your code only has one minor error in it.

$("#button4").on("click", function() {
$("#box").fadeIn("fast").animate({
    height: "150px", 
    weight: "150px"}, // spelling mistake?
    "fast").css({
        backgroundColor: "orange"; // this is the error
    });
})

Remove the ; and it works:

$("#button1").on("click", function() {
$("#box").animate({
    height:"+=50px", 
    width:"+=50px"}, 
    "fast");

});

$("#button2").on("click", function() {
$("#box").animate().css({
    backgroundColor: "blue"
});

});

$("#button3").on("click", function() {
$("#box").fadeOut();

});

$("#button4").on("click", function() {
 $("#box").fadeIn("fast").animate({
    height: "150px", 
    width: "150px"}, 
    "fast").css({
        backgroundColor: "orange"
    });
})
<!DOCTYPE html>
<html>
<head>
 <title></title>
 <link rel="stylesheet" type="text/css" href="style.css">
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
 <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>
 <button id="button1">Grow</button>
 <button id="button2">Blue</button>
 <button id="button3">Fade</button>
 <button id="button4">Reset</button>
</body>
</html>
James_F
  • 449
  • 2
  • 8