Unable to hide DIV when clicking outside using plain JS-CodePudding

I've been getting my feet wet with JavaScript and ran into this following issue. Can someone please explain why id="list-container" won't hide when I click outside of the DIV?

HTML:

<header >
        <div id="list-container">
            <ul >
                <li ><a>List Item 1</a></li>
                <li ><a>List Item 2</a></li>
                <li ><a>List Item 3</a></li>
                <li ><a>List Item 4</a></li>
                <li ><a>List Item 5</a></li>
            </ul>
        </div>
        
    </header>

    <button onClick="document.getElementById('list-container').style.visibility='visible'" type="button" >Click me!</button>

JavaScript:

const listContainer = document.getElementById('list-container')

document.addEventListener('click', (e) => {

    if (e.target != listContainer) {
        listContainer.style.visbility = 'hidden'
    }
})

CodePudding user response：

The First problem is that the property is called visibility and not visiblity

Here, the idea is to detect click events on the page and set the container’s display to none only when the target of the click isn’t one of the div descendants.

document.addEventListener('mouseup', function(e) {
  var listContainer = document.getElementById('list-container');
  if (!listContainer.contains(e.target)) {
      listContainer.style.visibility = 'hidden';
  }
});

<header >
  <div id="list-container">
      <ul >
          <li ><a>List Item 1</a></li>
          <li ><a>List Item 2</a></li>
          <li ><a>List Item 3</a></li>
          <li ><a>List Item 4</a></li>
          <li ><a>List Item 5</a></li>
      </ul>
  </div>
</header>

<button onClick="document.getElementById('list-container').style.visibility='hidden'" type="button" >Click me!</button>

CodePudding user response：

You had a typo in your script. Use "visibility" instead of "visbility". But there was also a logical flaw in your script: The click event handler was effectively triggered multiple times. In the following script it will only be called once. The listContainer.style.visibility = e.target.id==="btn" || e.target.closest(".ul") expression then checks, which element was clicked and makes the ul either "visible" or "hidden":

const listContainer = document.getElementById('list-container');

document.addEventListener('click', (e) => {
  console.log(e.target.tagName);
  listContainer.style.visibility = e.target.id==="btn" || e.target.closest(".ul") 
   ? "visible" : "hidden";
})

.ul {background-color:#ebe; width:200px}
li {background-color:#bfb; color:#0b0; padding:6px}
a {background-color:#ddf; color:#00f}

<header >
  <div id="list-container">
    <ul >
      <li ><a>List Item 1</a></li>
      <li ><a>List Item 2</a></li>
      <li ><a>List Item 3</a></li>
      <li ><a>List Item 4</a></li>
      <li ><a>List Item 5</a></li>
    </ul>
  </div>

</header>
<button id="btn">Click me!</button>

CodePudding user response：

So there are two reasons your button did not work. The first being that you are checking for clicks outside of the div to hide and the button is outside the div. Second, onclick has a lowercase C and also is simply used to call functions in the JS. Here I made a function which sets the visibility to visible and then also when the table it set to be hidden it is checked that the button was not hit.

const listContainer = document.getElementById('list-container')

function returnVis() {
    listContainer.style.visibility = 'visible'
}

document.addEventListener('click', (e) => {

    if (e.target != listContainer && e.target != document.getElementById('visbtn')) {
        listContainer.style.visibility = 'hidden';
    }
})

<header >
        <div id="list-container">
            <ul >
                <li ><a>List Item 1</a></li>
                <li ><a>List Item 2</a></li>
                <li ><a>List Item 3</a></li>
                <li ><a>List Item 4</a></li>
                <li ><a>List Item 5</a></li>
            </ul>
        </div>
        
    </header>

    <button id='visbtn' onclick="returnVis()" type="button" >Click me!</button>

If you wanted the table removed entirely from the viewport then use

listContainer.style.display = "hidden"

and

listContainer.style.display = "";

CodePudding user response：

Use display:none

const listContainer = document.getElementById('list-container');

      document.addEventListener('click', (e) => {
        if (e.target != listContainer) {
          listContainer.style.display = 'none';
        }
      });