存储循环结果以推送到 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;