Сохранение результата цикла для вставки в HTML

Обновлено: решено. После того, как полезные люди помогли мне решить эту проблему, я понял, что проблема связана с моим селектором getElementsByClassName. Извините, если название вводит в заблуждение. Исходный вопрос ниже.

Я получаю ожидаемые результаты от цикла for этой функции, но не могу заставить их распечатать в HTML.

Может ли кто-нибудь помочь указать, что мне не хватает? Подойдет точка в правильном направлении, я сам могу немного поработать.

Любой совет очень ценится.

HTML:

<input type = "text" name = "searchString" class = "searchString">

<span class = "longestWordInput"></span>
<span class = "longestWordCountInput"></span>

<button class = "generate">Generate</button>

JavaScript:

function longestWordFunc() {
  var stringSplit = document.querySelector(".searchString").value.split(" ");

  let longestWordCount = 0;
  let longestWord = "";

  for(var i = 0; i < stringSplit.length; i++) {
    if (stringSplit[i].length > longestWordCount) {

      longestWordCount = stringSplit[i].length; 
      longestWord = stringSplit[i]
    }
  }

  //Logging expected result
  console.info(longestWordCount)
  console.info(longestWord)

  //Print to HTML not working
  document.getElementsByClassName("longestWordInput").innerHTML = longestWord;
  document.getElementsByClassName("longestWordCountInput").innerHTML = longestWordCount;
};

document.querySelector(".generate").addEventListener("click", longestWordFunc);