JQuery Function .css with clicking action

Question

Why doesn't the color of the background change of the paragraph? I've tried using different methods that work, but this one is bothering me...

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$('#aod').click(function(){
    $('#para').css('background-color': 'red');
});
</script>
</head>
<body>
<p id="para"> Obrigado </p>
<a href="#" id="aod">Click on this paragraph.</a>

</body>
</html>

score 1 · Accepted Answer · answered Jul 18 '21 at 19:37

Your script is trying to select an element that has not yet been created, if you move that script below the <a> it should work

<a href="#" id="aod">Click on this paragraph.</a>
<script>
$('#aod').click(function(){
    $('#para').css('background-color': 'red');
});
</script>

You can also wrap your code in document.ready so it will be executed after the dom has loaded

<script>
$(document).ready(function(){
  $('#aod').click(function(){
    $('#para').css('background-color': 'red');
  });
});
</script>

JQuery Function .css with clicking action

1 Answers1