0

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>
Tatyana Jackson
  • 1

1 Answers1

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");
    });
});
Saumil
  • 2,399
  • 4
  • 25
  • 53
  • 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 ``. – Tushar Nov 20 '15 at 03:49
  • @Tushar It will work, please look at my demo – Saumil Nov 20 '15 at 03:50
  • @Tushar It is not necessary to write the ready tag because the event will automatically be called when the button is pressed – Saumil Nov 20 '15 at 03:51
  • Regarding fiddle demo see bottom of [this](http://stackoverflow.com/questions/32925912/why-class-selector-is-not-created-on-click-action/32925927?s=1|5.2414#32925927) or [this](http://stackoverflow.com/a/31848917/2025923). And you'll understand why it works in fiddle. – Tushar Nov 20 '15 at 03:51
  • Here's your [updated fiddle](https://jsfiddle.net/tusharj/t0m4s0zy/1/), the code is like OP. – Tushar Nov 20 '15 at 03:53
  • Also, use `addClass` to add class on element, and `$(this)` to refer the element that is clicked, inside the handler. – Tushar Nov 20 '15 at 03:59