CODEWITHSUNDEEP
javascriptjquery
Jennifer Bono
Jennifer Bono

Reputation: 1

Using Javascript and jQuery for the first time

I'm using Javascript and jQuery for the first time and I don't know what I am doing wrong. I have a homework assignment that gives me the .html document where I added the line.

Here is my .html

<!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>

    <script type="text/javascript" src="javascript.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.mins.js"></script>
</body>

Here is my .js file

function index(){

    var $box = $('#box');
$("#button1").click(function(){
    $("#box").animate({height: 300px});
});
   $("#button2").click(function(){
      $("#box").css("color", "blue");
 });
  $("#button3").click(function(){
       $("#box").fadeOut();
 });
 $("#button4").click(function(){
      $("box").end();
 });
 };
 $(document).ready(index);

Upvotes: 0

Views: 118

Answers (1)

sumit chauhan
sumit chauhan

Reputation: 1300

function index(){

    var $box = $('#box');
$("#button1").click(function(){
    $("#box").animate({height: '300px'});
});
   $("#button2").click(function(){
      $("#box").css("background-color", "blue");
 });
  $("#button3").click(function(){
       $("#box").fadeOut();
 });
 $("#button4").click(function(){
      $("box").end();
 });
 };
 $(document).ready(index);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

you are providing string value to height, you need to enclose 300px in inverted commas, also if you trying to change background color than use backgroundColor or background-color property, color is used to change color of texts.

these are some common mistake you've done, also consider what "pointy" has suggested you.

Upvotes: 1

Related Questions