title: Library Project - How to Pull an Object from an Array and Display it on HTML element?
body: <p>Im building a small Library App/Project. I have a form that when you enter in a &quot;Book Title&quot; the javascript searches through the Array of object with a match and then Displays all of the Books info to the HTML &quot;Library Card&quot;</p>
  <p>However it isnt working, but I think my logic is good. Can you help me?</p>
  <p>This is the &quot;Library Card&quot; and the &quot;Find Book Form&quot;</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>let libraryArray = [{
      AUTHOR: 'WILLIAM GOLDING',
      TITLE: 'LORD OF THE FLIES',
      PAGES: '224',
      READSTATUS: 'READ'
    },
    {
      AUTHOR: 'CS LEWIS',
      TITLE: 'THE HOBBIT',
      PAGES: '330',
      READSTATUS: 'UNREAD'
    },
    {
      AUTHOR: 'JK',
      TITLE: 'HARRY POTTER ',
      PAGES: '450',
      READSTATUS: 'READ'
    }
  ];
  
  document.querySelector('#findButton').addEventListener('click', function(event) {
  
    const bookInput = document.querySelectorAll('.bookTitle')
    for (let i = 0; i &lt; libraryArray.length; i++) {
      if (libraryArray[i].TITLE == bookInput[i].value) {
        document.getElementById("Author").innerHTML = libraryArray[i].AUTHOR;
        document.getElementById("Title").innerHTML = libraryArray[i].TITLE;
        document.getElementById("numPages").innerHTML = libraryArray[i].PAGES;
        document.getElementById("readStatus").innerHTML = libraryArray[i].READSTATUS;
      }
    }
  
    event.preventDefault();
  }, false)</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--Libray card--&gt;
  
  &lt;section&gt;
    &lt;div class="container-fluid"&gt;
      &lt;div class="row align-items-center"&gt;
        &lt;div class="col-lg-4 my-4"&gt;
          &lt;div class="card mx-auto library-card text-center p-5"&gt;
            &lt;div class="card-body"&gt;
              &lt;p class="small card-text"&gt; Copyrighted Material
                &lt;p&gt;
                  &lt;h3 class="card-title text-uppercase display-6"&gt;Library Card&lt;/h3&gt;
                  &lt;div class=""&gt;_________________________&lt;/div&gt;
                  &lt;div class="underline-space mb-3"&gt;&lt;/div&gt;
                  &lt;ul class="list-group list-group-flush"&gt;
                    &lt;li class="list-group-item text-uppercase mb-3" id="Author"&gt;&lt;/li&gt;
                    &lt;li class="list-group-item text-uppercase mb-3" id="Title"&gt;&lt;/li&gt;
                    &lt;li class="list-group-item text-uppercase mb-3"&gt;Number of Pages
                      &lt;p class="numPages" id="numPages"&gt;&lt;/p&gt;
                    &lt;/li&gt;
                    &lt;li class="list-group-item text-uppercase mb-3 readStatus"&gt;Read Status
                      &lt;p class=" text-uppercase readStatus bg-white" id="readStatus"&gt;&lt;/p&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- end of Library Card--&gt;
  
        &lt;!--Find a Book form --&gt;
        &lt;div class="col-lg-4"&gt;
          &lt;form class="text-center bg-light p-5 rounded my-4 mx-auto addAuthor" id="findAuthor"&gt;
            &lt;div class="form-group mx-auto"&gt;
              &lt;h3 class="card-title text-uppercase display-6"&gt;Find a Book&lt;/h3&gt;
              &lt;div class="mb-4"&gt;___________________________&lt;/div&gt;
  
              &lt;input class="form-control text-uppercase mb-4 bookTitle" type="text" placeholder="Title" name="TITLE" value=""&gt;
              &lt;br&gt;
            &lt;/div&gt;
            &lt;button type="button" class="btn btn-primary btn-lg rounded-pill px-5" id="findButton"&gt;Submit&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>