Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') Problem?

JavaScript
1 
<input type="text" class="output input" />
    <button class="output button">press</button>
    <ul class="output ul"></ul>
    <script>
    //   const list = document.querySelector(".output ul");

    // If I remove output class from list then 

      const list = document.querySelector(". ul");
      const searchInput = document.querySelector(".output input");
      const searchBtn = document.querySelector(".output button");
      
	//   Uncaught TypeError: Cannot set properties of null (setting 'innerHTML') *Problem is here, why I can't find solution*

      list.innerHTML = "";

      const myHistory = [];
      const MAX_HISTORY = 5;
       
	//   Uncaught TypeError: Cannot set properties of null (setting 'onclick')  Then This Problem is created What is the solution
      searchBtn.onclick = () => {
        if (searchInput.value !== "") {
          myHistory.unshift(searchInput.value);

          list.innerHTML = "";

          for (const itemText of myHistory) {
            const listItem = document.createElement("li");
            litItem.textContent = itemText;

            list.appendChild(listItem);
          }
        }
      };
    </script>
3

it show the item every time enter in searchInput

4

Sir, this problem from MDN array topics (Active learning: Top 5 searches). Could you solve this problem sir?

6

document.querySelector("ul");
Try this ?

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.