Using Javascript and jQuery for the first time

Question

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);

Not totally clear what you want the code to do or what the problem is - can you clarify please? — Duncan Thacker
– Duncan Thacker, Commented Aug 31, 2017 at 13:24
Import jQuery before your script; the order is important. Keep your browser developer console open so that you see errors (hit f12). — Pointy
– Pointy, Commented Aug 31, 2017 at 13:24

sumit chauhan · Accepted Answer · 2017-08-31 13:33:51Z

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.

Collectives™ on Stack Overflow

Using Javascript and jQuery for the first time

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related