Adding Border with Jquery [duplicate]

Question

Currently working on my lab for my College COSC class. In the lab I should be able to click on a button and the buttons border should turn to "3px solid green" This is what I currently have:

<html>
    <head>
        <title>Lab 10</title>
        <style type="text/css">
            div, p{
                width: 600px;
                background-color: lightgray;
            }
            .border_green{
                border: 3px solid green;
            }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js">
        </script>
        <script type="text/javascript>">
            $("#b1").click(function(){
                $("#b1").attr("Class",".border_green");
            });
        </script>
    </head>
    <body>
        <input id="b1" classname="button" type="button" value= "If this is clicked, a green solid border of three pixels will be created.">
</html>

Wrap your code in ready. Code: $(document).ready(function () { $("#b1").click(function () { $(this).addClass("border_green"); }); }); — Tushar
– Tushar, Commented Nov 20, 2015 at 3:46
This is what i'm using $("#b1").css("border","3px solid green"); — rjps12
– rjps12, Commented Nov 20, 2015 at 3:47

Saumil · Accepted Answer · 2015-11-20 04:01:26Z

0

You just need to remove the dot symbol from the class name and wrap your script in the ready method as Tushar suggested Here is the demo Here is the updated script.

$(document).ready(function(){
    $("#b1").click(function(){
         $("#b1").attr("class","border_green");
    });
});

edited Nov 20, 2015 at 4:01

answered Nov 20, 2015 at 3:46

Saumil

2,5176 gold badges34 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Tushar Over a year ago

Will not work. the main problem is event is not bound. The code need to be wrapped in ready or moved to the bottom of <body>.

Saumil Over a year ago

@Tushar It will work, please look at my demo

Saumil Over a year ago

@Tushar It is not necessary to write the ready tag because the event will automatically be called when the button is pressed

Tushar Over a year ago

Regarding fiddle demo see bottom of this or this. And you'll understand why it works in fiddle.

Tushar Over a year ago

Here's your updated fiddle, the code is like OP.

|

Collectives™ on Stack Overflow

Adding Border with Jquery [duplicate]

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related