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

Question

РЕДАКТИРОВАТЬ: Решено.После того, как полезные люди помогли мне решить эту проблему, я понял, что эта проблема связана с моим 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.log(longestWordCount)
  console.log(longestWord)

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

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

Answer 1

Проблема в том, что getElementsByClassName () возвращает NodeList (массивоподобную структуру, содержащую все элементы с указанным именем класса) вместо одного элемента.

Вы можете получить доступ к своемуэлемент с одним пролетом, подобный этому

document.getElementsByClassName("longestWordInput")[0].innerHTML = longestWord;

, или вы можете использовать querySelector () вместо

document.querySelector(".longestWordInput").innerHTML = longestWord;

Answer 2

Привет. Я считаю, что вам нужно использовать getElementsByClassName, как показано ниже

document.getElementsByClassName("longestWordInput")[0].innerHTML = longestWord;
document.getElementsByClassName("longestWordCountInput")[0].innerHTML = longestWordCount;