How to have one button produce 2 results, one after another

Language Help JavaScript
,
1

Hello! I have a small project for a course I’m taking. I have to click a button, then hidden text will appear. Then I click the same button again and the hidden text disappears. This code is what I have

<!DOCTYPE html>
<html lang="en">
   <head>
     <meta charset="utf-8">
  </head>
  <body>
    <div id="button">
      <button onclick="showHidden()"; "hideHidden()">Click me!</div>
    <p>Button clicked: <span id="counter">0</span></p>
    <div id="hiddenContent" style="display: none;">This was hidden</div>
    <script>
      function showHidden(){
        document.getElementById('hiddenContent').style.display = "block";
      }
      function hideHidden(){
        document.getElementById('hiddenContent').style.display = "none";
      }
    </script>
  </body>

I have also tried doing it with an event handler and can’t quite get that to work either. I feel like there’s some wording of onclick or something I’m not getting right? There’s just something about getting the second click to produce a different result that’s hanging me up. Thanks!

2

One way to do that is to create a boolean variable to keep track of it being displayed or not.

      <button onclick="toggleHidden()">Click me!</button>
previous code

That won’t work because only one function can be assigned to onclick for that element.
And all the javascript in there has to be between one set of " and "

I recommend putting the stuff you want to happen when that button is clicked into one function.

<script>
  let isDisplayed = false;
  
  function toggleHidden() {
    const hiddenContent = document.getElementById('hiddenContent');
    if (isDisplayed) {  // isDisplayed is true
       hiddenContent.style.display = "none";
       isDisplayed = false;
    }
    else {  // isDisplayed is false
       hiddenContent.style.display = "block";
       isDisplayed = true;
    }
  }
</script>

There are ways to do that without having this boolean variable as well.

I recommend using the css visibility property instead of display to make this disappear and reappear if you don’t want to change the layout of stuff on the page.

event listener

I you want to use the event listener stuff instead of the inline onclick,
then you could do this at the end of your javascript:

const btn = document,getElementsByTagName("button")[0];  // get first button
btn.addEventListener("click", toggleHidden);  // add event to happen when click

Also, you have a </div> where there should be a </button>

2 Likes
3

Thank you! I think the first option may have been what we were meant to do, but I just don’t know how you’re supposed to put your mindset into remembering or thinking that “Oh! This is what we’ll do!” It makes sense now that you’ve said it, but I just can’t imagine why I would’ve thought of this :frowning:

I don’t know why but it seems like no matter how I search for things to find answers I cant ever phrase it right to try to figure it out on my own. Seriously have spent hours on this one thing lol maybe this aint the job for me haha thank you though

4

Can I ask what makes it true or false? Is it just one click on, one click off?

5

Yes, that’s the idea … a click changes isDisplayed from false to true, or from true to false.

A shorter way to do that is

isDisplayed = !isDisplayed;

which changes isDisplayed to be the opposite of what it was.

6

If you do

<button onclick="showHidden(); hideHidden()">Click me!</button>

then both functions will happen on every click of that button.
And that’s not what you wanted.