1
<button class="edit">EDIT PROFILE</button>

<div class="display">
<input  type="file" name="profpic" accept="image/png, image/jpeg" 
style="max-width:480px;max-height:480px;">
</div>

I have few elements with class display and i want them to be displayed together with single button, but i can't find solution.

let btn = document.querySelector('.edit');
let prof = document.querySelectorAll('.display');
btn.onclick = function(){
  prof.classList.toggle("edited");
};

ofc css class display is set to none and edited is set to flex

Ninjowskyy
  • 11
  • 3
  • You can not toggle the class for the return value of querySelectorAll, you need to loop over that list and toggle the class for each node it contains. – CBroe May 02 '22 at 08:52
  • const btn = document.querySelector('.edit'); const prof = document.querySelectorAll('.display'); btn.addEventListener('click',()=>{ prof.forEach(el => { el.classList.toggle('edited'); }) }) – DnD2k21 May 02 '22 at 08:54

0 Answers0