为所有class为kanji的a标签设置href时出现undefined问题求助

你遇到的问题是错误地在HTMLCollection整体上调用了textContent，而不是针对每一个单独的<a>元素。document.getElementsByClassName("kanji")返回的是包含所有匹配元素的集合，这个集合本身没有textContent属性，所以会返回undefined，导致href变成https://jisho.org/search/undefined。

修正后的代码 #

const kanjiAnchor = document.getElementsByClassName("kanji")

for (var i = 0; i < kanjiAnchor.length; i++) {
  // 改为获取当前循环元素的textContent
  kanjiAnchor[i].href = `https://jisho.org/search/${kanjiAnchor[i].textContent}`
  kanjiAnchor[i].target = "_blank"
}

更简洁的写法（使用querySelectorAll） #

如果想让代码更现代简洁，可以用document.querySelectorAll，它支持直接用forEach遍历：

document.querySelectorAll(".kanji").forEach(anchor => {
  anchor.href = `https://jisho.org/search/${anchor.textContent}`
  anchor.target = "_blank"
})

说明 #

• 不管用getElementsByClassName还是querySelectorAll，核心都是针对集合里的每一个元素单独获取textContent，而不是在集合本身上调用。
• querySelectorAll返回的是NodeList，现代浏览器支持直接用forEach遍历，代码可读性更好。

内容的提问来源于stack exchange，提问作者ko100