problem z funkcją getElementByClassName

jak mam querySelector('input') zamiast getElementByClassName('vertical') to wszystko mi działa, nie wiem co jest w tym nie tak, wyskakuje mi : searchInput.addEventListener is not a function

  <input class='vertical' type="text" placeholder='szukaj...'>
  
  <ul>
    <li>Rafał</li>
  </ul>

  <button>add a word</button>

  <script src='main.js'></script>

const searchInput = document.getElementsByClassName('vertical');
const li = [...document.querySelectorAll('ul li')];
const ul = document.querySelector('ul');
let tab = [];


const addWord = () => {
    let word = prompt('give me a word');
    tab.push(word);
    console.log(tab);
    let newLi = document.createElement("li");
    newLi.textContent = word;
    ul.appendChild(newLi);
} 

const searchWord = e => {
    const currentWord = e.target.value;
    let result = li;
    result = result.filter(li => li.textContent.includes(currentWord));
    ul.textContent = ' ';
    result.forEach(name => ul.appendChild(name));
}



searchInput.addEventListener('input', searchWord);
document.querySelector('button').addEventListener('click', addWord)

Tam masz getElementsByClassName (zwraca kolekcje) a nie getElement , więc dodaj [0].

querySelector() zwraca pierwszy element pasujący do selektora, podczas gdy getElementsByClassName() zwraca wszystkie pasujące obiekty, zatem:

const searchInputs = document.getElementsByClassName('vertical');

Array.from(searchInputs).forEach((searchInput) => {
  searchInput.addEventListener('input', searchWord);
});