How to hide/unhide elements with a class on button click?

Question

When I click on the button, my goal is to display different text on click.

If the button says, Submit w/ Name & Email?, then all form fields should display.

If the button says, Submit Anonymously?, name and email fields should be removed.

Currently, only the name field disappears when the button is clicked, and it does return. I am trying to remove all fields with the class of pii if the button is clicked.

How can I do that?

submitAnon.addEventListener("click", function myFunction() {
  let btn = document.getElementById("submitAnon");
  let submitAnon = 'Submit Anonymously?';
  let submitEmail = 'Submit w/ Email?';
  
  let pii = document.querySelector('.pii');
  
  if (btn.innerHTML === submitAnon) {
    btn.innerHTML = submitEmail;
    pii.style.display = 'none';
  } else {
    btn.innerHTML = submitAnon;
    pii.style.display = 'block';
  }
});

<button id="submitAnon">Submit Anonymously?</button>

<form name="myForm" id="myForm">
  <input type="text" class="pii" placeholder="your name">
  <input type="email" class="pii" placeholder="your email">
  <input type="text" class='non-pii' placeholder="city">
  <textarea name="comments" id="comments" cols="30" rows="10" placeholder="your comments"></textarea>
</form>

score 0 · Answer 1 · answered Jul 21 '22 at 19:45

Issue here is the use of querySelector https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector, as you can see this would select the first element.

You want to get all the elements of the class. Then you can loop through that and update each of their style.

https://bobbyhadz.com/blog/javascript-hide-all-elements-by-class

A similar question asked as well : Hide all elements with class using plain Javascript

Brother58697 · Answer 2 · 2022-07-21T20:25:29.197

Use querySelectorAll which returns an HTML Collection. These are array-like but not actual arrays, so they don't have array prototype methods like forEach.

We want to iterate over all the elements in the collection so to use those methods, we convert the collection into an array of elements, with the most concise way being spreading ... it in a new array [].

let array = [...collection]

Then we just change the display mode of each element like you did. In my example below, I abstracted this into a function to avoid repeating the forEach

submitAnon.addEventListener("click", function myFunction() {
  let btn = document.getElementById("submitAnon");
  let submitAnon = 'Submit Anonymously?';
  let submitEmail = 'Submit w/ Email?';
  
  let pii = document.querySelectorAll('.pii'); // Using querySelectorAll
                                               // Which returns an HTML Collection                 
   function editPii(displayMode) {
      [...pii].forEach((el) => el.style.display = displayMode) // Spread in new array [...] 
   }
  
  if (btn.innerHTML === submitAnon) {
    btn.innerHTML = submitEmail;
    editPii('none');
  } else {                                              
    btn.innerHTML = submitAnon;
    editPii('block');
  }
});

<button id="submitAnon">Submit Anonymously?</button>

<form name="myForm" id="myForm">
  <input type="text" class="pii" placeholder="your name">
  <input type="email" class="pii" placeholder="your email">
  <input type="text" class='non-pii' placeholder="city">
  <textarea name="comments" id="comments" cols="30" rows="10" placeholder="your comments"></textarea>
</form>

An alternative to converting it to an array is to use a for of loop like so:

submitAnon.addEventListener("click", function myFunction() {
  let btn = document.getElementById("submitAnon");
  let submitAnon = 'Submit Anonymously?';
  let submitEmail = 'Submit w/ Email?';
  
  let pii = document.querySelectorAll('.pii'); // Using querySelectorAll
                                               // Which returns an HTML Collection                 
   function editPii(displayMode) {
     for (let el of pii) {
        el.style.display = displayMode
     }
   }
  
  if (btn.innerHTML === submitAnon) {
    btn.innerHTML = submitEmail;
    editPii('none');
  } else {                                              
    btn.innerHTML = submitAnon;
    editPii('block');
  }
});

<button id="submitAnon">Submit Anonymously?</button>

<form name="myForm" id="myForm">
  <input type="text" class="pii" placeholder="your name">
  <input type="email" class="pii" placeholder="your email">
  <input type="text" class='non-pii' placeholder="city">
  <textarea name="comments" id="comments" cols="30" rows="10" placeholder="your comments"></textarea>
</form>

How to hide/unhide elements with a class on button click?

2 Answers2