Click outside an element doesn't work

Question

I have this code:

function showAll(el){
  var id = el.parentNode.id;
  var all= document.getElementById(id).getElementsByClassName('items')[0];

  if(all.style.display === 'block'){
    all.style.display = 'none';
  } else{
    all.style.display = 'block';
    window.addEventListener('mouseup', function(e){
    document.getElementById('test').innerHTML = e.target.className;
      if(e.target != all){
        all.style.display = 'none';
      }
    });
  }

}

<div id="parent">
    <div class="selected" onClick="showAll(this);">
    </div>
    <div class="items" style="display: none">
    </div>
</div>

Basically what i want to achieve is: click on selected to display items which is now hidden after that if i click again on selected or if i click outside of items(a random spot on that page or even on selected) i want to be able to hide items.

The problem is that without the EventListener when i click on selected it works to display items and then if i click again on selected it works to hide items but if i click on a random spot it doesn't work to close items.

But when i add EventListener and i click on selected it works to click a random spot to close items but it doesn't work to click selected again to close items.

Can anybody help me with a full JavaScript explanation, please?

Answer 1

You're going to want to use highly reusable code. I use change() and id_() on my web platform all of the time and it's very direct and simple. In the below example the second parameter will make the class empty (you can also use id_('items').removeAttribute('class') for a cleaner DOM (Document Object Model)).

HTML

<input onclick="change(id_('items','');" type="button" value="Display Items" />
<div clas="hidden" id="items"><p>Items here.</p></div>

CSS

.hidden {display: none;}

JavaScript

function change(id,c)
{
 if (id_(id)) {id_(id).className = c; if (id_(id).className=='') {id_(id).removeAttribute('class');}}
 else if (id) {id.className = c; if (id.className=='') {id.removeAttribute('class');}}
 else {alert('Error: the class id \''+id+'\' was not found or has not yet been imported to the DOM.\n\nNew class intended: '+c);}
}

function id_(id)
{
 if (id == '' && window['console']) {console.log('Developer: empty id called from: '+id_.caller.toString().split('function ')[1].split('(')[0]);}
 return (document.getElementById(id)) ? document.getElementById(id) : false;
}

This code exists from years of refining the same platform instead of industry standard drama of pointlessly changing things. You are two clicks from finding more highly reusable functions on my platform's JavaScript documentation from the link in my profile.