Tutorial :<h2> background-color is not changing with Jquery?


I have an h2 element with an id of title and I have the following script:

<script type="text/javascript">  $(document).ready(function(){       $("#title").css("background-color","red");       )};  </script>  

The background-color is not changing though and I can't figure out why?

<html>  <head>  <title>Table Sorter</title>  <script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>  <script type="text/javascript" src="/js/jquery.tablsorter.min.js"></script>    <script type="text/javascript">  $(document).ready(function(){    $("#title").css("background-color","red");      )};  </script>  </head>    <body>  <h2 id="title">Table Sorter</h2>  </body>  </html>    <script type="text/javascript">  $(document).ready(function()  {      $("#title").css("background-color","red");      $("#myTable").tablesorter();  }  );  </script>  



<link type="text/javascript" src="/js/jquery-1.3.2.min.js"/>  


<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>  

You also have a syntax error in your jQuery function at the closing brackets. They should be

$(document).ready(function(){    $("#title").css("background-color","red");  });  

If that still does not fix your problem, then put an alert in there like this...

$(document).ready(function(){    alert("Howdy!");  });  

If you do not see the alert message, then your jQuery script is not loaded, which means the relative path in the SRC attribute is incorrect.


It seems you've made another typo:

<title>Table Sorter</table>                       ^^^^^  

Replace table with title:

<title>Table Sorter</title>  


Can you get it working without jQuery? Try:

document.getElementById("title").style.backgroundColor = "#F00";  

instead of your current script. If this does not work, check that you have well-formed HTML.

UPDATE: now that you've posted your HTML, I can see that you need to use a script tag instead of a link tag to import jQuery



<link type="text/javascript" src="/js/jquery-1.3.2.min.js"/>  


<script type="text/javascript" src="/js/jquery-1.3.2.min.js"/>  


Here you go. Other people have pointed out some small problems you had, such as using a link tag where you need a script tag, etc. This code works for me:

<html>    <head>      <title>Table Sorter</title>      <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>      <script type="text/javascript">        $(document).ready(function(){          $("#title").css("background-color","red");        });      </script>    </head>    <body>      <h2 id="title">Table Sorter</h2>    </body>  </html>  

It looks like there was a typo in your code at the end of your $(document).ready section where you had )}; instead of });. If you use Firefox you can open up the error console and view any Javascript errors or warnings.


Ok, I figured it out and I don't know why it is was happening. Below the JQuery script tag, I had another script tag:

<script type="text/javascript" src="/js/jquery.tablsorter.min.js"/>  

When I removed the above, it worked. But I don't know why?

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »