javascript - <h2> background-color is not changing with Jquery? - Stack Overflow

I have an h2 element with an id of title and I have the following script:<script type="textjav

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>

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>
Share edited Sep 20, 2018 at 6:32 fabrik 14.4k8 gold badges57 silver badges71 bronze badges asked Mar 18, 2009 at 18:19 XaisoftXaisoft 46.7k87 gold badges287 silver badges444 bronze badges 5
  • Is the ID really unique to that document? – Gumbo Commented Mar 18, 2009 at 18:21
  • Yes, it is the only thing on the page – Xaisoft Commented Mar 18, 2009 at 18:22
  • post the plete html as well. – bchhun Commented Mar 18, 2009 at 18:22
  • In your first script, you have )}; where it should read }); – Svante Svenson Commented Mar 18, 2009 at 19:45
  • can you post an example? – Xaisoft Commented Mar 18, 2009 at 20:05
Add a ment  | 

6 Answers 6

Reset to default 6

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.

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

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"/>

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?

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1744851223a4597137.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信