CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
user7910922
user7910922

Reputation:

Can't make button color change

Trying to do something super basic which doesn't seem to work:

HTML

<head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
<body>        
    <button style="margin: 10px; color:white; background-color: #4CAF50; font-size:40px;" type="button" id="aaa" > גבע</button>    
</body>

JS

$("aaa").click(function () {
    $(this).css('backgroundcolor', 'white');
});

The button color doesn't seem to change. What am I doing wrong?

Thanks!

Upvotes: 1

Views: 105

Answers (9)

Divakar
Divakar

Reputation: 3

for id use '#' and for 'backgroundcolor' use 'background-color'

$("#aaa").click(function () {
    $(this).css('background-color', 'white');
});

Upvotes: 0

Manoj Srivastava
Manoj Srivastava

Reputation: 670

button is an id selector #aaa.

<html>
<head>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
</head>
<body>


<button style="margin: 10px; color:white; background-color: #4CAF50; font-size:40px;" type="button" id="aaa" > גבע</button>

<script>

    $("#aaa").click(function () {
    
        $(this).css('background-color', 'white');
    });

</script>
</body>

</html>

<script>

    $("#aaa").click(function () {
        $(this).css('background-color', 'white');
    });

</script>

Upvotes: 1

Ehsan
Ehsan

Reputation: 12959

1) Change $("aaa") To $("#aaa") : For id selector must use # sign.

2)Change backgroundcolor To background-color

$("#aaa").click(function () {
  $(this).css('background-color', 'white');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button style="margin: 10px; color:white;background-color: #4CAF50;  font-size:40px;" type="button" id="aaa" > גבע</button>

Upvotes: 0

punithan
punithan

Reputation: 26

$(this).css("background-color", "yellow");

replace "backgroundcolor" attribute to "background-color"

Then it will work!

Good luck

Upvotes: 0

Pranav C Balan
Pranav C Balan

Reputation: 115222

Two bugs are there

  1. Put # before the id selector which is missing in your code.
  2. The CSS(or DOM style) property should be background-color or backgroundColor

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button style="margin: 10px; color:white; background-color: #4CAF50; font-size:40px;" type="button" id="aaa" > גבע</button>

<script>

    $("#aaa").click(function () {
        $(this).css('background-color', 'white');
    });

</script>

Upvotes: 0

sheriffderek
sheriffderek

Reputation: 9043

$('.thing').on('click', function() {
  $(this).css('background', 'red');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class='thing'>button</button>

$('#aaa')

You need to target the element by id in your case.

Upvotes: 1

Mr.Pandya
Mr.Pandya

Reputation: 2038

For id use # for class use . in selector

 $("#aaa").click(function () {
    $(this).css({'background-color':'white'});
});

Upvotes: 0

haMzox
haMzox

Reputation: 2109

Replace your code with:

$("#aaa").click(function () {
        $(this).css('backgroundColor', 'white');
    });

There is a problem with your selector rule, you are missing "#"

Upvotes: 0

brk
brk

Reputation: 50291

Two changes required

  1. Id selection need a # in jquery
  2. change backgroundColor to backgroundColor or background-color

$("#aaa").click(function() {
  $(this).css('backgroundColor', 'white');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button style="margin: 10px; color:white; background-color: #4CAF50; font-size:40px;" type="button" id="aaa"> גבע</button>

Upvotes: 1

Related Questions