Исключить элементы для события focusout

У меня есть div, который выглядит так:

    <div class = "whole-container" id = "body">
  <form method = "post" action = "<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
  <div class = "queryAndpostswitcher">
     <button id = "logOut" name = "logOut" title = "Log Out From The Site"> <i class = "fas fa-sign-out-alt"></i></button>
  </div>
</form>
  <div class = "make_a_post" id = "container">
    <div class = "tabs">
      <button name = "make_post" id = "post"><i class = "fa fa-pencil"></i> Make a post </button>
      <button name = "make_query" id = "query"><i class = "fa fa-question"></i> Make a query </button>
    </div>
    <div class = "main-post" id = "main-post">
      <textarea placeholder = "Enter Your Post Here" minlength = "5" onfocus = "showButton();" id = "postTextArea" onfocusout = "makeEveryThingNormal(this.id)"></textarea>
    </div>
    <div class = "main-query" style = "display: none;" id = "main-query">
      <textarea placeholder = "Enter Your Query Here" minlength = "5" onfocus = "showButton();" id = "queryTextArea" onfocusout = "makeEveryThingNormal(this.id)"></textarea>
      <select name = "askTo">
        <option> Friends </option>
        <option> Community </option>
        <option> Both</option>
      </select>
    </div>
        <form action = "<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method = "POST" enctype = "multipart/form-data">
                <label for = "multimedia"> <i class = "fa fa-camera-retro"></i> Multimedia </label>
                <input type = "file" id = "multimedia" name = "image" style = "display: none;"/>
               <input type = "submit" style = "display: none;"/>
          </form>
          <div class = "postingOptions">
        <button id = "postButton"><i class = "fa fa-tick"></i>Let's Go!</button>
      </div>
      </div>

У него есть два варианта: опубликовать сообщение или запрос. Я добавил события onfocus и onfocusout. И мои теги скрипта выглядят так:

<script type = "text/javascript">
  function showButton() {
    let container = document.getElementById("container");
    let postButton = document.getElementById("postButton");
    let otherPosts = document.getElementsByClassName("post");
    container.style.height = "30%";
    postButton.style.display = "block";
    for(let i=0;i<otherPosts.length;i++){
      otherPosts[i].style.display = "none";
    }
  }
  function makeEveryThingNormal (id) {
    let container = document.getElementById("container");
    let postButton = document.getElementById("postButton");
    let otherPosts = document.getElementsByClassName("post");
    postButton.addEventListener("click", () => {
      alert("Yahooo!");
    })
    container.style.height = "25%";
    postButton.style.display = "none";
    document.getElementById(id).value = "";
    for(let i=0;i<otherPosts.length;i++){
      otherPosts[i].style.display = "block";
    }

  }
</script>

Таким образом, он выделяет только div публикации и скрывает другие элементы, когда ввод находится в фокусе. Теперь я должен был запустить функцию при нажатии кнопки, но при нажатии кнопки функция не работает. Итак, если есть такая функция, как:

if (button.isClicked===true){
do something;
}

Или, если бы я мог исключить некоторые элементы на focusout, проблема была бы решена. Но вроде ничего не работает. Итак, что мне делать, чтобы все прошло хорошо? Пожалуйста, ответьте!