title: need help understanding why searchQuery.value is undefined
body: <p>so i'm currently trying to build search icon on the header clickable where you're able to search for, in this case, pokemon names, however i keep getting a console error</p>
  <blockquote>
  <p>searchQuery.value undefined</p>
  </blockquote>
  <p>Not sure why because the code looks valid.</p>
  <p>Also, when you click on the search icon the icon goes above it and once you hit submit on the input it duplicates. I'm sure it's all connected the bug.</p>
  <p>No sure why this is happening and would greatly appreciate any advice to fix this.</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 pokemonRepository = (function() {
    let pokemonList = [];
    // API
    let apiUrl = "https://pokeapi.co/api/v2/pokemon/?limit=150";
  
    let searchIcon = $(".btn-outline-secondary");
    let modalContainer = $(".modal");
    let modalDialog = $(".modal-dialog");
    let modalContent = $(".modal-content");
    let modalBody = $(".modal-body");
    let modalTitle = $(".modal-title");
    let modalHeader = $(".modal-header");
    let modalClose = $(".btn-close");
  
    let listItemArray = $("li");
  
    function add(pokemon) {
      if (
        typeof pokemon === "object" &amp;&amp;
        "name" in pokemon &amp;&amp;
        "detailsUrl" in pokemon
      ) {
        pokemonList.push(pokemon);
      } else {
        console.error("pokemon is not correct");
      }
    }
  
    function getAll() {
      return pokemonList;
    }
  
    //  filters through pokemon names
    function search(pokemonName) {
      return pokemonList.filter((pokemon) =&gt; pokemon.name === pokemonName);
    }
  
    // Function adds a list of pokemon
    function addListItem(pokemon) {
      let pokemonDisplay = $(".list-group-horizontal");
      // Creates li element
      let listItem = $("&lt;li&gt;");
      listItem.addClass(
        "list-group-item text-center col-sm-6 col-md-4 border border-secondary bg-image img-fluid"
      );
  
      // Creates h1 for Pokemon Name
      let listTitle = $("&lt;h1&gt;");
      listTitle.html(`${pokemon.name}`);
      listTitle.addClass("display-6");
  
      // Creates div which holds sprites
      let listImg = $("&lt;div&gt;");
      loadDetails(pokemon).then(function() {
        listImg.append(
          `&lt;img src=${pokemon.imageUrlFront} alt="${pokemon.name} sprite"/&gt;`
        );
      });
  
      let listButton = $("&lt;button&gt;");
      listButton.text("show More");
  
      // Added Bootstrap Utility Class
      listButton.addClass("mp-2 btn btn-secondary");
      listButton.attr("type", "button");
      listButton.attr("data-bs-toggle", "modal");
      listButton.attr("data-bs-toggle", "#pokemonModal");
  
      listItem.append(listTitle);
      listItem.append(listImg);
      listItem.append(listButton);
      pokemonDisplay.append(listItem);
  
      buttonEvent(listButton, pokemon);
    }
  
    function buttonEvent(listButton, pokemon) {
      listButton.on("click", () =&gt; {
        showDetails(pokemon);
      });
    }
  
    function showDetails(pokemon) {
      loadDetails(pokemon).then(() =&gt; {
        // Clears existing content
        modalContainer.empty();
  
        modalTitle.addClass("modal-title h5 col-sml-3");
  
        let pokemonType = {
          fire: "text-danger",
          grass: "text-success",
          water: "text-primary",
          electric: "text-warning",
          flying: "text-info",
          poison: "text-secondary",
        };
  
        pokemon.types.forEach((type) =&gt;
          modalTitle.addClass(pokemonType[type.type.name])
        );
        modalTitle.html(`${pokemon.name}`);
  
        modalBody.html(`
              Entry: ${pokemon.id}&lt;br&gt;
              Height: ${pokemon.height}&lt;br&gt;
              Weight: ${pokemon.weight}&lt;br&gt;
              Types: ${pokemon.types[0].type.name}`);
  
        if (pokemon.types.length === 2) {
          modalBody.innerHTML += `, ${pokemon.types[1].type.name}`;
        }
  
        modalBody.innerHTML += `&lt;br&gt;Abilities: ${pokemon.abilities[0]}.ability.name}`;
  
        if (pokemon.abilities.length === 2) {
          modalBody.innerHTML += `, ${pokemon.abilities[1]}.ability.name}`;
        }
  
        modalBody.append(`&lt;br&gt;
            &lt;img src=${pokemon.imageUrlFront} alt="${pokemon.name} front sprite"&gt;
            &lt;img src=${pokemon.imageUrlBack} alt="${pokemon.name} back sprite"&gt;
            &lt;br&gt;
            `);
  
        modalDialog.append(modalContent);
        modalContent.append(modalHeader);
        modalHeader.append(modalTitle);
        modalHeader.append(modalClose);
        modalContent.append(modalBody);
        modalContainer.append(modalDialog);
      });
  
      modalContainer.modal("show");
    }
  
    modalContainer.on("shown.bs.modal", () =&gt; {
      // Jquery eventlistener
      modalClose.on("click", () =&gt; {
        modalContainer.removeClass("fade");
        modalContainer.modal("hide");
        listItemArray[0].children().click();
      });
    });
  
    searchIcon.on("click", () =&gt; {
      // fetching .d-flex class in form
      let bodyHeader = $(".d-flex");
      // returns the number of child elements
      if (bodyHeader.length === 1) {
        //creates input element
        let searchQuery = $("&lt;input&gt;");
        searchQuery.attr("placeholder", "Pokemon Name");
        searchQuery.attr("type", "search");
        searchQuery.attr("aria-label", "search Pokemon Name");
        searchQuery.addClass("form-control my-3 ps-2 col-sm");
  
        searchIcon.blur();
        searchQuery.focus();
        bodyHeader.append(searchQuery);
  
        searchQuery.on("keydown", (e) =&gt; {
          if (e.key === "Enter") {
            e.preventDefault();
            searchQuery.value =
              searchQuery.value.charAt(0).toUpperCase() +
              searchQuery.value.slice(1);
  
            for (let i = 0; i &lt; listItemArray.length; i++) {
              if (
                902 &gt;
                listItemArray[i].children().last().getBoundingClientRect()[
                  "top"
                ] &amp;&amp;
                listItemArray[i].children().last().getBoundingClientRect()[
                  "top"
                ] &gt; 42
              ) {
                listItemArray[i].children().last().click();
              }
            }
            for (let i = 0; i &lt; listItemArray.length; i++) {
              if (listItemArray[i].text().split("\n")[0] === searchQuery.value) {
                setTimeout(function() {
                  listItemArray[i].children().last().click();
                }, 5);
              }
            }
          }
        });
      }
    });
  
    // Fetches data from API
    function loadList() {
      return fetch(apiUrl)
        .then(function(response) {
          return response.json();
        })
        .then(function(json) {
          json.results.forEach((item) =&gt; {
            let pokemon = {
              name: item.name.charAt(0).toUpperCase() + item.name.slice(1),
              detailsUrl: item.url,
            };
            add(pokemon);
          });
        })
        .catch(function(error) {
          console.error(error);
        });
    }
  
    function loadDetails(item) {
      let url = item.detailsUrl;
      return fetch(url)
        .then(function(response) {
          return response.json();
        })
        .then(function(details) {
          item.imageUrlFront = details.sprites.front_default;
          item.imageUrlBack = details.sprites.back_default;
          item.id = details.id;
          item.height = details.height;
          item.weight = details.weight;
          item.types = details.types;
          item.abilities = details.abilities;
        })
        .catch(function(error) {
          console.error(error);
        });
    }
  
    return {
      add: add,
      getAll: getAll,
      addListItem: addListItem,
      search: search,
      showDetails: showDetails,
      loadList: loadList,
      loadDetails: loadDetails,
      buttonEvent: buttonEvent,
    };
  })();
  
  pokemonRepository.loadList().then(function() {
    pokemonRepository.getAll().forEach(function(pokemon) {
      pokemonRepository.addListItem(pokemon);
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &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;meta name="description" content="The Pokédex is a simple encyclopedia of Pokémon and their characteristics." /&gt;
    &lt;link rel="shortcut icon" href="img/favicon.png" type="image/x-icon" /&gt;
    &lt;title&gt;Pokédex App&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" /&gt;
    &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css" /&gt;
    &lt;link rel="stylesheet" href="/dist/style.production.css" /&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;nav class="navbar navbar-expand-lg sticky-top navbar-light bg-light"&gt;
      &lt;div class="container-fluid"&gt;
        &lt;a href="#home" class="navbar-brand"&gt;
          &lt;img src="img/ball.png" width="30" height="24" alt="" class="d-inline-block align-text-top" /&gt;&lt;span class="text-uppercase font-weight-bold text-secondary"&gt;Pokèdex&lt;/span&gt;
        &lt;/a&gt;
        &lt;button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"&gt;
                &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
              &lt;/button&gt;
        &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
          &lt;ul class="navbar-nav me-auto mb-2 mb-lg-0"&gt;
            &lt;li class="nav-item"&gt;
              &lt;a class="nav-link active" aria-current="page" href="#home"&gt;Home&lt;/a
                    &gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item"&gt;
                    &lt;a class="nav-link" href="#about"&gt;About&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
          &lt;/li&gt;
          &lt;/ul&gt;
          &lt;form class="d-flex row" role="search"&gt;
            &lt;!-- &lt;input
                    class="form-control me-2"
                    placeholder="Pokemon Name"
                    aria-label="Search"
                  /&gt; --&gt;
            &lt;button class="btn btn-outline-secondary" type="submit"&gt;
                    &lt;i class="bi bi-search"&gt;&lt;/i&gt;
                  &lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  
    &lt;p class="fw-bold position-absolute top-10 start-50 text-center text-danger"&gt;&lt;/p&gt;
    &lt;!-- Pokemon Display --&gt;
    &lt;div class="container"&gt;
      &lt;ul class="list-group list-group-horizontal flex-fill row mt-4"&gt;&lt;/ul&gt;
    &lt;/div&gt;
    &lt;!-- Display Ends Here --&gt;
  
    &lt;div class="modal fade" id="pokemonModal" tabindex="-1" role="dialog" aria-labelledby="pokemonModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog pt-5 text-center" role="document"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;h5 class="modal-title col-sm-3" id="pokemonModalLabel"&gt;&lt;/h5&gt;
            &lt;button type="button" class="btn-close me-3" data-dismiss="modal" aria-label="Close" aria-hidden="true"&gt;&lt;/button&gt;
          &lt;/div&gt;
          &lt;!-- Content is dynamically created using jquery --&gt;
          &lt;div class="modal-body"&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"&gt;&lt;/script&gt;
  
    &lt;script src="/src/js/scripts.js"&gt;&lt;/script&gt;
  
    &lt;script src="/src/js/promise-polyfill.js"&gt;&lt;/script&gt;
    &lt;script src="/src/js/fetch-pollyfill.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>