Show/Hide div element using Javascript does not work

Question

I have tried to toggle visibility of a div element using both hidden and style.display with the element id but it's not working.

My goal is that when you press the first button, the div hides and shows the other div. Vice versa when the second div is pressed.

I am using event Listener. Is something wrong with how I am coding it? I realise that I didn't call the second button, but I'm trying to test with the first button.

Thanks!

var buttonOne = document.querySelector("#madLibCreation");

buttonOne.addEventListener("submit", getValues);

function getValues(e) {
  var firstFruit = document.getElementById("fruitOne");
  var firstNoun = document.getElementById("nounOne");
  var firstName = document.getElementById("nameOne");
  var firstAdjective = document.getElementById("adjectiveOne");
  var firstColor = document.getElementById("colorOne");
  var secondAdjective = document.getElementById("adjectiveTwo");
  var thirdAdjective = document.getElementById("adjectiveThree");
  var secondNoun = document.getElementById("nounTwo");
  var firstVerb = document.getElementById("verbOne");
  var secondVerb = document.getElementById("verbTwo");
  var thirdNoun = document.getElementById("nounThree");
  var thirdVerb = document.getElementById("verbThree");
  var firstAnimal = document.getElementById("animalOne");

  document.getElementById("madLibValues").hidden = true;
  document.getElementById("madLibResults").hidden = false;

}

#madLibValues,
#madLibResults {
  position: absolute;
}

#madLibResults {
  display: none;
}

<div id="container">
  <div id="madLibValues">
    <form id="madLibs">
      <label for="fruitOne">Fruit</label><input type="text" id="fruitOne">
      <label for="nounOne">Noun</label><input type="text" id="nounOne">
      <label for="adjectiveOne">Adjective</label><input type="text" id="adjectiveOne">
      <label for="colorOne">Color</label><input type="text" id="colorOne">
      <label for="adjectiveTwo">Adjective</label><input type="text" id="adjectiveTwo">
      <label for="adjectiveThree">Adjective</label><input type="text" id="adjectiveThree">
      <label for="nounTwo">Noun</label><input type="text" id="nounTwo">
      <label for="verbOne">Verb</label><input type="text" id="verbOne">
      <label for="verbTwo">Verb</label><input type="text" id="verbTwo">
      <label for="nounThree">Noun</label><input type="text" id="nounThree">
      <label for="verbThree">Verb</label><input type="text" id="verbThree">
      <label for="animalOne">Animal</label><input type="text" id="animalOne">
      <input type="submit" id="getMadLibCreation" name="Get Mad Lib Creation">
    </form>
  </div>
  <div id="madLibResults">
    <p id="madLibsCreation">
      Hi
    </p>
    <button id="goBackToMadLibs">
                    Go Back To Mad Libs
                </button>
  </div>
</div>

I'm using VSCode's live server and i refreshed the page after editing my code. It doesn't work — user12597446
– user12597446, Commented Jan 23, 2020 at 3:47

Dacre Denny · Accepted Answer · 2020-01-23 03:54:01Z

There are a few things that need to be changed here; firstly, inline element styling is done via the style property, rather than directly on the element itself:

/* Apply inline styling via the style object */
document.getElementById("madLibValues").style = /*...*/;

Also, you might consider toggling visiblity of your elements via the display rule:

/* Obtain the elements for each dialog */
let valuesElement = document.getElementById("madLibValues");
let resultsElement = document.getElementById("madLibResults");

/* A css display value of none prevents madLibValues display */
valuesElement.style.display = "none";

/* Unset the css display value to restore default element display behavior */
valuesElement.style.display = "unset";

There are a few other changes to make as well, which are summarised in the code snippet below - hope that helps!

function getValues(e) {
  
  /* Stop form from submitting */
  e.preventDefault();

  var firstFruit = document.getElementById("fruitOne");
  var firstNoun = document.getElementById("nounOne");
  var firstName = document.getElementById("nameOne");
  var firstAdjective = document.getElementById("adjectiveOne");
  var firstColor = document.getElementById("colorOne");
  var secondAdjective = document.getElementById("adjectiveTwo");
  var thirdAdjective = document.getElementById("adjectiveThree");
  var secondNoun = document.getElementById("nounTwo");
  var firstVerb = document.getElementById("verbOne");
  var secondVerb = document.getElementById("verbTwo");
  var thirdNoun = document.getElementById("nounThree");
  var thirdVerb = document.getElementById("verbThree");
  var firstAnimal = document.getElementById("animalOne");

  /* Updated code */
  let valuesElement = document.getElementById("madLibValues");
  let resultsElement = document.getElementById("madLibResults");

  valuesElement.style.display = "none";
  resultsElement.style.display = "unset";
}

/* Updated selector to match getMadLibCreation id */
var buttonOne = document.querySelector("#getMadLibCreation");

/* Replace submit with click to catch user interaction with button */
buttonOne.addEventListener("click", getValues);

#madLibValues, #madLibResults {
    position: absolute;
}

#madLibResults {
    display: none;
}

<div id="container">
  <div id="madLibValues">
    <form id="madLibs">
      <label for="fruitOne">Fruit</label><input type="text" id="fruitOne">
      <label for="nounOne">Noun</label><input type="text" id="nounOne">
      <label for="adjectiveOne">Adjective</label><input type="text" id="adjectiveOne">
      <label for="colorOne">Color</label><input type="text" id="colorOne">
      <label for="adjectiveTwo">Adjective</label><input type="text" id="adjectiveTwo">
      <label for="adjectiveThree">Adjective</label><input type="text" id="adjectiveThree">
      <label for="nounTwo">Noun</label><input type="text" id="nounTwo">
      <label for="verbOne">Verb</label><input type="text" id="verbOne">
      <label for="verbTwo">Verb</label><input type="text" id="verbTwo">
      <label for="nounThree">Noun</label><input type="text" id="nounThree">
      <label for="verbThree">Verb</label><input type="text" id="verbThree">
      <label for="animalOne">Animal</label><input type="text" id="animalOne">
      <input type="submit" id="getMadLibCreation" name="Get Mad Lib Creation">
    </form>
  </div>
  <div id="madLibResults">
    <p id="madLibsCreation">
      Hi
    </p>
    <button id="goBackToMadLibs">
                Go Back To Mad Libs
            </button>
  </div>
</div>

JLowther · Accepted Answer · 2020-01-23 03:57:13Z

The way I've done this in the past has always been to hide all of the tabs on click, then "display: block;" the one the user clicked. Here's what I use:

function tabSelect(evt,tabName){
    var i, tabcontent, tablinks;
  // Each tab will have the ".tabcontent" class. This gathers them into an array and sets display style to "none":
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++){
        tabcontent[i].style.display = "none";
    }
  // This takes the actual tabs and removes the active status from all of them before reapplying it to the clicked tab:
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++){
        tablinks[i].className = tablinks[i].className.replace("tabactive", "");
    }
    var x = document.getElementById(tabName);
    x.style.display = "block";
    evt.currentTarget.classList.add("tabactive");
}

This both hides the shown tab content and afterwards shows the content from the clicked tab, then gives the clicked tab the CSS style of "tabactive" (which can look however you'd like).

Lastly, include this function in the HTML of each tab element:

onclick="tabSelect(evt,'tabNameGoesHere');"

Mister Jojo · Accepted Answer · 2020-01-23 04:10:32Z

USES NAMES in FORMS !

const formContainer = document.getElementById('container')
  ,   form_madLibs = document.getElementById('madLibs')
  ;
form_madLibs.onsubmit=evt=>
{
  evt.preventDefault()

  // get ALL Values
  Array.from(new FormData(form_madLibs),elm=>console.log(elm[0],'->',elm[1]))

  formContainer.style.visibility='hidden'
}

label  { display:block; width: 10em; }

<div id ="container">
  <div>
      <form id="madLibs">
          <label>Fruit     <input type="text" required name="fruitOne">      </label>
          <label>Noun      <input type="text" required name="nounOne">       </label>
          <label>Adjective <input type="text" required name="adjectiveOne">  </label>
          <label>Color     <input type="text" required name="colorOne">      </label>
          <label>Adjective <input type="text" required name="adjectiveTwo">  </label>
          <label>Adjective <input type="text" required name="adjectiveThree"></label>
          <label>Noun      <input type="text" required name="nounTwo">       </label>
          <label>Verb      <input type="text" required name="verbOne">       </label>
          <label>Verb      <input type="text" required name="verbTwo">       </label>
          <label>Noun      <input type="text" required name="nounThree">     </label>
          <label>Verb      <input type="text" required name="verbThree">     </label>
          <label>Animal    <input type="text" required name="animalOne">     </label>
          <button type="submit">Get Mad Lib Creation</button>
      </form>
  </div>
  <div>
      <p id="madLibsCreation">
          Hi
      </p>
      <button id="goBackToMadLibs">
          Go Back To Mad Libs
      </button>
  </div>
</div>

Collectives™ on Stack Overflow

Show/Hide div element using Javascript does not work

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related