.addclass() doesn't work, but .removeclass() does? Missing something big?

.addclass() doesn't work, but .removeclass() does? Missing something big?

Hi,

So when I use the following .js the .removeclass works, but not the add class.  I think there may be something bigger I'm missing I'm not really sure.  Any overall guidance would be great.  Thanks
  1. $(document).ready(function() {

  4. $('.title').addClass('titletwo');
  5. $('.title').removeClass('title');
  7. });
Here is my .css and .html

  1. .para{
  2. background-color: aqua;
  3. }

  5. .title{
  6. background-color: green;
  7. }

  9. #header1{
  10. font-style: bold;
  11. }


  14. #para1{
  15. font-size: larger;
  16. }


  19. .titletwo{
  20. text-color: white;
  21. }

  1. <html>
  2. <header>
  3. <script src = "http://localhost:8888/ci/js/jquery.js"></script>
  4. <script src = "http://localhost:8888/ci/js/javatest.js"></script>

  6. <link rel="stylesheet" type="text/css" href="http://localhost:8888/ci/css/javatest.css" />
  7. </header>

  9. <body>
  11. <div class = "div" id = "div1">
  12. <h1 id = "header1" class = "title">This is a Header</h1>
  13. <p id = "para1" class = "para">This is the paragraph of the first div and header</p>
  14. </div>

  16. </body>
  17. </html>