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

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

Answer 2

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

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

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

或者您可以改用querySelector()

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

存储for循环结果以推入HTML

2 个答案: