HTML / Javascript - Trouble changing text when clicked

Question

So I have some HTML code here:

<body>
<b style="font-size: 26px;">How the game works</b>
<u id="HowToPlay_HideShow" style="color: #9FF;">[hide]</u><br>
</body>

And I also used Javascript to turn the hide text into show, and show back into hide when clicked on.

<script>
var HowGameWorks_Hidden = false;
document.getElementById("HowToPlay_HideShow").onclick = function () {
    if (HowGameWorks_Hidden == false) {
        document.getElementById("HowToPlay_HideShow").innerHTML = "[show]";
        HowGameWorks_Hidden = true;
    }
    if (HowGameWorks_Hidden == true) {
        document.getElementById("HowToPlay_HideShow").innerHTML = "[hide]";
        HowGameWorks_Hidden = false;
    }
}
</script>

This, however, does not seem to work. Clicking on the hide and show text has no effect at all. So I tried removing this piece of code:

if(HowGameWorks_Hidden == true) {
    document.getElementById("HowToPlay_HideShow").innerHTML = "[hide]";
    HowGameWorks_Hidden = false;
  }

And it correctly turns the hide text into show when I click it (but, of course, does not turn the show text back into hide).

So how do I get my code working?

Michal · Accepted Answer · 2014-02-06 07:22:49Z

3

This is because your second if statement will always get triggered if your first one does, since you set HowGameWorks_Hidden to true in it. You need to use an else:

if(HowGameWorks_Hidden == false) {
  document.getElementById("HowToPlay_HideShow").innerHTML = "[show]";
  HowGameWorks_Hidden = true;
}

else if(HowGameWorks_Hidden == true) {
  document.getElementById("HowToPlay_HideShow").innerHTML = "[hide]";
  HowGameWorks_Hidden = false;
}

answered Feb 6, 2014 at 7:22

Michal

2,5321 gold badge20 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

chris97ong Over a year ago

But why? Why can't I simply use an If-statement instead of else? (Anyway it works now, thanks)

Michal Over a year ago

Read my edit, I added a bit of an explanation. Walk through what happens when HowGameWorks_Hidden is false - you hit your first if statement and as a result set HowGameWorks_Hidden to true. Now you hit your second if...and so you set HowGameWorks_Hidden to false. The else prevents you from going into the second if statement if the first succeeds.

Collectives™ on Stack Overflow

HTML / Javascript - Trouble changing text when clicked

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related