在文档级添加处理程序就足够了，在处理程序中使用Element.closest来过滤单击的按钮。
使用css类隐藏div#form，并在单击button#btn时删除该className（因此：显示表单）。

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>

你可以使用事件传播。
下面是代码，stopProgation方法是用来阻止父事件调用的。

// Get a reference to the parent div
const parentDiv = document.getElementById("parent-div");

// Add a click event listener to the parent div
parentDiv.addEventListener("click", function(event) {
  // Stop the click event from propagating to the parent div
  event.stopPropagation();
});

// Add a click event listener to the document to close the div
// when the user clicks anywhere outside of it
document.addEventListener("click", function() {
  parentDiv.style.display = "none";
});

存在多个错误。如果要检查是否已单击，则应在If语句中使用==而不是= My solution works。

let button = document.getElementById('btn');
let form = document.getElementById('form');
let submit_button = document.getElementById('submit');
let body = document.getElementsByTagName("body")[0];

window.addEventListener( 'click' , function(e) {
    if ( e.target == button ) {
        e.stopPropagation();
        form.style.display = 'block';
        form.style.backgroundColor = 'black';
        form.style.color = '#fff';     
    } else if( e.target == body ){
      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>