存储 for 循环结果以推送到 HTML答案

【问题标题】：Storing for loop result to push into HTML存储 for 循环结果以推送到 HTML
【发布时间】：2019-03-12 09:20:49
【问题描述】：

编辑：已解决。在这里乐于助人的人帮助我解决了这个问题后，我意识到这个问题与我的 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);

【问题讨论】：

标签： javascript function for-loop innerhtml getelementsbyclassname

【解决方案1】：

问题在于getElementsByClassName() 返回的是一个 NodeList（一个类似数组的结构，包含具有指定类名的所有元素）而不是单个元素。

您可以像这样访问您的单个跨度元素

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

或者你可以使用querySelector() 代替

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

【讨论】：

【解决方案2】：

嗨，我相信你需要像下面这样使用 getElementsByClassName

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

【讨论】：