Bringing over CSS style to jquery code

Question

My code is only half working - it is bringing over font-size and font-family but nothing else :(. Here is the CSS:

#block2 {
    background-color: #99F5F5;
    border: solid;
    border-color: #7AC4C4;
    font-size: 30px;
    font-family: sans-serif;
    width: 355px;
    height: 40px;
}

Here is my jquery:

$(document).ready(function() {
    $('#btn1').click(function() {
        $("ul").addClass("#block2").append("<li>" + $("#txt1").val() + "</li>");
        $("#txt1").val("").focus();
    });
});

Like I said above - when I click btn1 I append a new 'li' but the CSS is only bringing over the font-size and font-width. Please help!! I'd like for all of #block2 to work when I append a new 'li'.

$("#txt1").val("").focus(); - this is wrong, should be $("#txt1").focus(); — odedta
– odedta, Commented Jul 6, 2015 at 6:11
Open your developers console and see which styles get overwritten, then add !important to those styles. — odedta
– odedta, Commented Jul 6, 2015 at 6:12

Spade · Accepted Answer · 2015-07-06 06:17:13Z

3

Make the change in the CSS, you were declaring block2 as an ID # instead of a class .

.block2 {
    background-color: #99F5F5;
    border: solid;
    border-color: #7AC4C4;
    font-size: 30px;
    font-family: sans-serif;
    width: 355px;
    height: 40px;
}

Here is Jquery:

$(document).ready(function() {
    $('#btn1').click(function() {
        $("ul").addClass("block2").append("<li>" + $("#txt1").val() + "</li>");
        $("#txt1").val("").focus();
    });
});

edited Jul 6, 2015 at 6:17

Spade

5913 silver badges20 bronze badges

answered Jul 6, 2015 at 6:13

answer99

2511 silver badge13 bronze badges

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

1 Comment

code_strider Over a year ago

This did the exact same thing as my code above. Just pulled over font-size and font-family. I tried the !important and the font size and font-family went to default and when I placed a !important on border color, my border disappeared, and if I don't use !important on border color, the border comes out black...it seems my CSS is acting extremely weird :(

code_strider · Accepted Answer · 2015-07-06 19:33:53Z

0

The problem was my HTML. I had class=block2 on my 'ul'. I deleted the class out of the HTML and left it in CSS, put .addClass on its on line in jquery and did 'li' instead of 'ul' and it works nicely. Thanks everyone for making me understand better!!!

answered Jul 6, 2015 at 19:33

code_strider

174 bronze badges

Collectives™ on Stack Overflow

Bringing over CSS style to jquery code

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related