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



Question:

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>  


Solution:1

Replace

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

with

<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.


Solution:2

It seems you've made another typo:

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

Replace table with title:

<title>Table Sorter</title>  


Solution:3

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


Solution:4

Replace

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

with

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


Solution:5

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.


Solution:6

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
Previous
Next Post »