I have the following code and it doesn't seem to work at all. No border is drawn. I there anything wrong? (I have jQuery included correctly because other parts, which use it, work)

<script>
$(document).ready(function() {
    $('#login').css({"border":"3px solid black"});
});
function setBorder() {
    $('#login').css({"border":"1px solid black"});
}
</script>
<div id="#login">
    <form>
        Username: <input type="text" /><input type="button" value="Log in" onclick="setBorder();"/>
    </form>
</div>

I have the following code and it doesn't seem to work at all. No border is drawn. I there anything wrong? (I have jQuery included correctly because other parts, which use it, work)

<script>
$(document).ready(function() {
    $('#login').css({"border":"3px solid black"});
});
function setBorder() {
    $('#login').css({"border":"1px solid black"});
}
</script>
<div id="#login">
    <form>
        Username: <input type="text" /><input type="button" value="Log in" onclick="setBorder();"/>
    </form>
</div>

• javascript
• html
• css

• Instead of changing CSS rules directly, you should add and remove classes from tags. P.S. The "username:" should be in <label> tag. – tereško Commented Dec 13, 2011 at 12:56
• <div id="#login"> -> <div id="login"> as suggested by Quentin. – OnesimusUnbound Commented Dec 13, 2011 at 12:59

5 Answers 5

Your selector matches "An element with the id 'login'" but your element has the id '#login'.

Remove the # from the ID. The character isn't allowed in ids in HTML 4 anyway.

You must change id="#login" to -> id="login"

Two things wrong with your code :

1. the ID login doesn't need the # in the html
2. The .css function you call is $elem.css('property','new value')

Correct code would be

<script>
$(document).ready(function() {
    $('#login').css("border","3px solid black");
});
function setBorder() {
    $('#login').css("border","1px solid black");
}
</script>
<div id="login">
    <form>
        Username: <input type="text" /><input type="button" value="Log in"     onclick="setBorder();"/>
    </form>
</div>

Set border is never called also you should not have a # in your id

 <script>
$(document).ready(function() {
    $('#login').css({"border":"3px solid black"});
     setBorder();

});
function setBorder() {
    $('#login').css({"border":"1px solid black"});
}
</script>
<div id="login">
    <form>
        Username: <input type="text" /><input type="button" value="Log in" onclick="setBorder();"/>
    </form>
</div>

Like others said, you need to remove # from the ID, since it isn't allowed as a valid HTML ID:

<div id="login">

Also, your setBorder() can be called from jQuery, not directly with obstrusive JavaScript:

$('input[type=button]').click(setBorder);

Look at the working sample here: http://jsbin./ihixub/edit#javascript,html