Question

I’m trying to make a div that rotates through messages as they are clicked with jquery. I’m not sure why the following doesnt work:

$(document).ready(function() {
$("#box").html("message1");
$("#box").click(function() {
    if ($("#box").html("message1"))
      {
      $("#box").html("message2");
      }
    else if ($("#box").html("message2"))
      {
      $("#box").html("message3");
      }
    else if ($("#box").html("message3"))
      {
      $("#box").html("message1");
      }
});
});

When you click the div, it will switch from message 1 to message 2. But when you click it again, it wont change again.

Answer 1

Because

if ($("#box").html("message1")) 

doen’t check if the html is message1 instead it sets the html to message1 and returns a jQuery object corresponding to #box so the above code will always be true. That’s why you always get the content changed to message2 .

$(document).ready(function() {
$("#box").html("message1");
$("#box").click(function() {
    var box = $(this);//Cache the object
    if (box .html() == "message1")
      {
      box.html("message2");
      }
    else if (box.html() == "message2")
      {
      box.html("message3");
      }
    else if (box.html() == "message3")
      {
      box.html("message1");
      }
});
});

---

You might want to look at the .text() method which might be suitable in your case instead of .html().