does not detect an element

<div class="interactivearea">
         <form class="simplecontrols">
          <label for="authorname" class="cooldesign">Author Name</label>
          <input type="text" class="cooldesign" id="authorname" name="authorname">
          <input type="button" class="cooldesign" id="addauthor" name="addauthor" value="Add Author">
          <input type="button" class="cooldesign" id="removeauthor" name="removeauthor" value="Remove Author">
          <input type="button" class="cooldesign" id="swapallauthors" name="swapallauthors" value="Swap All Authors">
          <br>
          <label for="bookname" class="cooldesign">Book Name</label>
          <input type="text" class="cooldesign" id="bookname" name="bookname">
          <input type="button" class="cooldesign" id="addbook" name="addbook" value="Add Book">
          <input type="button" class="cooldesign" id="removebook" name="removebook" value="Remove Book">
          <input type="button" class="cooldesign" id="replacebook" name="replacebook" value="Replace Book">
          <input type="button" class="cooldesign" id="swapallbooks" name="swapallbooks" value="Swap All Books">
         </form>
         <script>
             class book
             {
                 constructor(_name = "",_year = 0)
                 {
                  this.name = _name;
                  this.year = _year;
                 }

                 getname = function()
                 {
                     return this.name;
                 }

                 getyear = function()
                 {
                     return this.year;
                 }

                 getallinfo = function()
                 {
                     var allinfo = "Book Info: \n Name: " + this.name + "\n Year: " + this.year + "\n";
                 }

                 setname = function(_name)
                 {
                     this.name = _name;
                 }

                 setyear = function(_year)
                 {
                     this.year = _year;
                 }

             }
             class author
             {
                 constructor(_name = "",_yearofbirth = 0,_books = [])
                 {
                     this.name = _name;
                     this.yearofbirth = _yearofbirth;
                     this.books = _books;
                 }

                 getname = function ()
                 {
                     return this.name;
                 }

                 getyearofbirth = function()
                 {
                     return this.yearofbirth;
                 }

                 getbooks = function()
                 {
                     return this.books;
                 }

                 getallinfo = function()
                 {
                     fullinfo = "Author Info: \n Name: " + this.getname() + "\n Birth Year: " + this.getyearofbirth() + "\n Books by this author: " + this.getbooks() + "\n";
                     return fullinfo;
                 }

                 setname = function(_name)
                 {
                     this.name = _name;
                 }

                 setyearofbirth = function(_yearofbirth)
                 {
                     this.yearofbirth = _yearofbirth;
                 }

                 setbooks = function(_books)
                 {
                     this.books = _books;
                 }

                 addbook = function(_book)
                 {
                     books.push(book);
                 }

                 removebook = function(_book)
                 {
                     for(book in books)
                     {
                         if(book === _book)
                         {
                             books.splice(books.indexOf(book),1);
                         }
                     }
                 }

             }
             var authors = [{name:"Иван Вазов", yearofbirth: 1850,books: [{name: "Под Игото",year : 1893},{name: "Немили-недраги", year: 1883},{name: "Чичовци",year:1885}]}];
             var authornameinput = document.getElementById("authorname");
             var addauthorbutton = document.getElementById("addauthor");
             var removeauthorbutton = document.getElementById("removeauthor");
             var swapallauthorsbutton = document.getElementById("swapallauthors");
             var booknameinput = document.getElementById("bookname");
             var addbookbutton = document.getElementById("addbook");
             var removebookbutton = document.getElementById("removebook");
             var replacebookbutton = document.getElementById("replacebook");
             var swapallbooksbutton = document.getElementById("swapallbooks");
             var interactiveareaelement = document.getElementById("interactivearea");

             function CreateElementForArrayItem(arr = [],parentelement)
             {
                 if((parentelement !== undefined && arr !== undefined) && (parentelement !== null && arr !== null))
                 {
                     for(item of arr)
                     {
                         var itemcontainer = document.createElement("div");
                         itemcontainer.classList.add("cooldesign");
                         itemcontainer.classList.add(typeof item);
                         parentelement.appendChild(itemcontainer);
                     }
                 }
             }
             console.log(interactiveareaelement);
             CreateElementForArrayItem(authors,interactiveareaelement);
         </script>
     </div>