Parent div closes when a child is clicked. How to prevent this from happening?

I have a div with three child divs and two divs within the second child. My intention is to close the div when i click anywhere outside the parent div and it shouldnt close when i click inside it. But whenever i click on one of the child elements the div closes.

i tried to use window.addEventListener and if statement so that every time click outside the div is made the display changes to none.

`

let button = document.getElementById('btn');
let form = document.getElementById('form');
let submit_button = document.getElementById('submit');

window.addEventListener( 'click' , function(e) {
    if ( e.target = button ) {
        form.style.display = 'block';
        form.style.backgroundColor = 'black';
        form.style.color = '#fff';
        
        window.addEventListener( 'click' , function(e) {
            if ( e.target != button && e.target != form ) {
                form.style.display = 'none';
                
            }         
        });
    } 
})

`

        <button id="btn" > 
            Add  
        </button>

        <div id="form">
            <h1>Hello</h1>

            <div id="innerbox">

                <div id="prompts">
                    
                </div>


                <div id="user_inputs">
                    <input type="text" id="BookName" placeholder="Name">
                    <input type="text" id= "Author" placeholder="Author">
                    <input type="text" id="Pages" placeholder="Pages">
                </div>               
            </div>

            <div id="bottom_portion">
                <button id="submit">

                    Submit

                </button>
            </div>            
        </div>




    <script src="new.js">
    </script>

“

>Solution :

Adding the handler at the document level is sufficient. In your handler use Element.closest to filter for a clicked button.

Use a css class to hide div#form and remove that className when button#btn is clicked (so: show the form).

document.addEventListener(`click`, handle);

function handle(evt) {
  if (evt.target.closest(`#btn`)) {
    document.querySelector(`#form`)
      .classList.remove(`hidden`);
    evt.target.closest(`#btn`).setAttribute(`disabled`, `disabled`);
  }
  
  if (evt.target.closest(`#submit`)) {
    console.clear();
    console.log(`button#submit clicked: do something with the form`);
    
  }
}

.hidden {
  display: none;
}

<button id="btn">Add</button>

<div id="form" class="hidden">
  <h1>Hello</h1>

  <div id="innerbox">
    <div id="prompts"></div>
    <div id="user_inputs">
      <input type="text" id="BookName" placeholder="Name">
      <input type="text" id="Author" placeholder="Author">
      <input type="text" id="Pages" placeholder="Pages">
    </div>
  </div>
  <div id="bottom_portion">
    <button id="submit">Submit</button>
  </div>
</div>