Auto-hide text and show through button press

so i'm working on a small project with some features, however, not everyone needs most of these features so I tried to auto-hide them when loading the page and to show them when they click on a button.

But I just can't get the "Red Space:" Text to work. "Happening:" should show up when the page loads but can still be turned of while "Red Space:" should be the opposite of it. How can I do that the "Red Space:" text is visible when I click on a button?

I'm still pretty new to Javascript (which you can probably see by looking at the code...) so I appreciate some more beginner-friendly explanations, thanks in advance

Here is my HTML, CSS and Javascript:

function displayOnOff(scounter) {
  var displayNone = document.getElementById('name').name
  var visible = "display: none;"
  if (displayNone == 1) {
    document.getElementById(scounter + 'Explanation').style = "display: none;"
    document.getElementById('name').name = 2
  } else if (displayNone == 2) {
    document.getElementById(scounter + 'Explanation').style = " "
    document.getElementById('name').name = 1
  }
}
.obscure {
  display: none;
}

.inputText {
  margin-left: 70px;
}

.changesButton {
  margin-right: 40px;
}
<div class="playerExplanation">
  <b class="inputText" id="happeningExplanation"> Happening:</b>
  <div id="redSpaceExplanation"><b class="inputText obscure"> Red Spaces: </b></div>
</div>

<div id="changesBorderTop"></div>
<div class="marioPartyChanges">
  <button class="changesButton" onclick="displayOnOff('happening')"> Happening on/off </button>

  <button class="changesButton" onclick="displayOnOff('redSpace')"> RedSpace on/off </button>
</div>
<img name="1" style="display: none;" id="name">

1 answer

  • answered 2018-01-11 21:14 Joe Hawkins

    There are actually a couple of problems preventing "Red Space:" from ever showing up.

    The first is that the line if (displayNone == 1) is comparing the result of document.getElementById('name').name (which is a string "1" or "2") to a number (1 or 2). The name property always returns a string. You cannot compare numbers and strings without converting one to the other. For that we use parseInt()

    var displayNone = parseInt(document.getElementById('name').name);

    Now displayNone is a number and if (displayNone == 1) can evaluate to true.

    The next problem is that the element containing 'Red Spaces:' has the CSS class .obscure. This class was defined as .obscure { display: none; }. This means that the element will be hidden unless the display style if overriden somehow. You're function aims to do this inline (in the style attribute), but when you remove display: none; from the style attribute you do so by setting .style = " ". This means that .obscure is no longer overridden with any inline style and its styles will now apply to the element.

    Suggestion: Do not use an image to store information about the state of your application. You are better off using a boolean variable or <input> of type "hidden".

    Run the following snippet to see the changes in action. I removed the .obscure class, tidied up code, and traded the <img> element for a variable.

    var displayingNone = false;
    
    function displayOnOff(scounter) {  
      var explanation = document.getElementById(scounter + 'Explanation');
      var display = document.getElementById('name');
    
      if (displayingNone === true) {
        explanation.style = "display: none;";
        displayingNone = false;
      } else if (displayingNone === false) {
        explanation.style = " ";
        displayingNone = true;
      }
    }
    .inputText {
      margin-left: 70px;
    }
    
    .changesButton {
      margin-right: 40px;
    }
    <div class="playerExplanation">
      <div id="happeningExplanation"><b class="inputText"> Happening: </b></div>
      <div id="redSpaceExplanation" style="display:none;"><b class="inputText"> Red Spaces: </b></div>
    </div>
    
    <div class="marioPartyChanges">
      <button class="changesButton" onclick="displayOnOff('happening')"> Happening on/off </button>
      <button class="changesButton" onclick="displayOnOff('redSpace')"> RedSpace on/off </button>
    </div>

    NOTE You'll notice that sometimes you have to click a button twice to toggle visibility of the associated text. This is because only one variable is being used to track the visibility of both elements. One element may be in the opposite state of the other. After clicking the button one time, they are now in the same state. The next click would yield the desired result.