title: How can I create e new "recent search" button using the code I have created? I am still getting error messages in dev tools and not sure what to do
body: <p>I'm working to create not only a space for recent searches in local storage but also to create a new working button on my main project page once functioning. I am receiving an error message that the &quot;addEventListener(&quot;click&quot;, buttonClickHandler); call I have at the very bottom of my code cannot read property of &quot;null&quot; so I'm wondering where I went wrong in the starting piece. I have tried to rework this piece of JS so many times now and I'm just not sure where to go from here at this point. Any advice?</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>var cityFormEl = document.querySelector("#city");
  var cityNameInputEl = document.querySelector("#location");
  var dateFormEl = document.querySelector("#date");
  var dateNameInputEl = document.querySelector("#today");
  var historyButtonsEl = document.querySelector("#search-item");
  var historyCardEl = document.querySelector("#recent-searches");
  var trashEl = document.querySelector("#trash");
  var searchHistoryArray = []
  
  var formSubmitHandler = function (event) {
      event.preventDefault();
  
      // get city name value from input element
  
      var cityBtn = cityNameInputEl.value.trim();
  
      // Set city name in local storage and generate history buttons
  
      if (cityBtn) {
          searchHistoryArray.push(cityBtn);
          localStorage.setItem("citySearch", JSON.stringify(searchHistoryArray));
          localStorage.setItem("dateSearch", JSON.stringify(searchHistoryArray));
          var searchHistoryEl = document.createElement('button');
          searchHistoryEl.className = "btn";
          searchHistoryEl.setAttribute("data-city", "data-date", cityBtn)
          searchHistoryEl.innerHTML = cityBtn;
          historyButtonsEl.appendChild(searchHistoryEl);
          historyCardEl.removeAttribute("style")
          cityNameInputEl.value = "";
      }
      else {
          alert("Please enter a Date and a City name");
      }
  }
  
  
  // Load any past city searches
  
  var loadHistory = function () {
      searchArray = JSON.parse(localStorage.getItem("citySearch"));
      if (searchArray) {
          searchHistoryArray = JSON.parse(localStorage.getItem("citySearch", "dateSearch"));
          for (let i = 0; i &lt; searchArray.length; i++) {
              var searchHistoryEl = document.createElement('button');
              searchHistoryEl.className = "btn";
              searchHistoryEl.setAttribute("data-city", "data-date", searchArray[i])
              searchHistoryEl.innerHTML = searchArray[i];
              historyButtonsEl.appendChild(searchHistoryEl);
              historyCardEl.removeAttribute("style");
          }
      }
  }
  
  // Search using search history buttons
  
  var buttonClickHandler = function (event) {
      var cityBtn = event.target.getAttribute("data-city", "data-date",);
      if (cityBtn) {
          formSubmitHandler(cityBtn);
      }
  }
  
  // Clear Search History
  
  var clearHistory = function (event) {
      localStorage.removeItem("citySearch", "dateSearch");
      historyCardEl.setAttribute("style", "display: none");
  }
  cityFormEl.addEventListener("submit", formSubmitHandler);
  historyButtonsEl.addEventListener("click", buttonClickHandler);
  trashEl.addEventListener("click", clearHistory);
  loadHistory();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;title&gt;Adventure Time&lt;/title&gt;
      &lt;link rel="stylesheet" href="../adventure-time/assets/css/styles.css" /&gt;
      &lt;link rel="stylesheet" href="../adventure-time/build/styles.css" /&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;header&gt;
          &lt;nav class="flex justify-between items-center"&gt;
              &lt;a href="#"&gt;&lt;img class="max-w-xs p-8" src="../adventure-time/assets/img/adventure-time-logo-reverse.png"
                      alt="Logo of Adventure Time" /&gt;&lt;/a&gt;
              &lt;a href="#recent-searches" class="recent-search-nav"&gt;Recent Searches&lt;/a&gt;
  
          &lt;/nav&gt;
          &lt;section class="hero"&gt;
              &lt;div class="hero-statement"&gt;
                  &lt;h2&gt;
                      Your &lt;span id="adventure"&gt; Adventure&lt;/span&gt; &lt;br /&gt;
                      Starts here
                  &lt;/h2&gt;
                  &lt;p&gt;Enter a time and place to start your journey&lt;/p&gt;
                  &lt;br /&gt;
  
              &lt;/div&gt;
              &lt;form class="search-input flex justify-between"&gt;
                  &lt;div id="date"&gt;
                      &lt;input type="date" id="today" name="date" value="2021-08-01" min="2021-08-01" max="2022-12-31"
                          class="date-input cst-btn cst-btn-lft"&gt;
                  &lt;/div&gt;
                  &lt;div class="time-input cst-btn cst-btn-cntr"&gt;&lt;input type="time" id="time" name="time" min="07:00"
                          max="22:00" required&gt;&lt;/div&gt;
                  &lt;div class="location-input cst-btn cst-btn-cntr"&gt;
                      &lt;div id="city"&gt;
                          &lt;label&gt;City&lt;/label&gt;
                          &lt;input id="location" type="text" tabindex="3" name="city"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;button class="cst-btn cst-btn-rgt" id="search"&gt;&lt;a href=adventure.html&gt;Find my Adventure&lt;/a&gt;&lt;/button&gt;
              &lt;/form&gt;
          &lt;/section&gt;
          &lt;!-- HERO END --&gt;
      &lt;/header&gt;
      &lt;main class="m-auto w-3/4"&gt;
          &lt;div id="recent-searches"&gt;
              &lt;h2 class="text-black text-4xl text-center"&gt;Recent Searches&lt;/h2&gt;
              &lt;div class="recent-searches flex justify-around"&gt;
                  &lt;div class="search-item"&gt;
                      &lt;h4&gt;Los Angeles, CA&lt;/h4&gt;
                      &lt;p&gt;Sat, Jul 7 at 3:00 PM&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="search-item"&gt;
                      &lt;h4&gt;Portland, OR&lt;/h4&gt;
                      &lt;p&gt;Sat, Jul 7 at 3:00 PM&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="search-item"&gt;
                      &lt;h4&gt;New York, NY&lt;/h4&gt;
                      &lt;p&gt;Sat, Jul 7 at 3:00 PM&lt;/p&gt;
                  &lt;/div&gt;
                  &lt;div class="search-item"&gt;
                      &lt;h4&gt;Vancouver, BC&lt;/h4&gt;
                      &lt;p&gt;Sat, Jul 7 at 3:00 PM&lt;/p&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
      &lt;/main&gt;
      &lt;footer class="main-footer"&gt;
          &lt;h5&gt;Made with ❤️&amp;nbsp by Team Awesome&lt;/h5&gt;
      &lt;/footer&gt;
      &lt;script src="../adventure-time/assets/js/script.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>