JavaScript代码未按预期工作

这是我的项目。我想把userWord的字母放在五个盒子里。为什么当我使用这个JavaScript代码时，它只出现在每一个字母上

for (var i = 0; i < 5; i++) {  
        document.getElementsByClassName("letters")[input].childNodes[i].innerHTML = "<h1>" + userWord[i].toUpperCase() + "</h1>";
    }    

（变量i=0；i<5；i++）的

document.getElementsByCassName（“字母”）[input].childNodes[i].innerHTML=”“+userWord[i].toUpperCase（）+“”；
}    

我似乎想不出解决办法

那将是：

for (var i = 0; i < 5; i++) {
    document.getElementsByClassName("letter")[i].firstElementChild.textContent = userWord[i].toUpperCase();
}

文件：

---

属性

childNodes

返回元素中的所有节点，这些节点包括文本节点，即实际元素之间的空白。相反，尝试使用

子元素

，它只返回子元素，这是您想要的

例如：

for (var i = 0; i < 5; i++) {  
    document.getElementsByClassName("letters")[input].children[i].innerHTML = "<h1>" + userWord[i].toUpperCase() + "</h1>";
}

（变量i=0；i<5；i++）的

document.getElementsByCassName（“字母”）[input].children[i].innerHTML=“”+userWord[i].toUpperCase（）+”；
}

（我在你的代码笔中测试了这个，它完全符合你的要求。）

有关更多详细信息，请参阅：

• MDN文档：
• MDN文档：

---

ChildNodes正在抓取文本，您需要的是.children（）

var-word='МА敪А'；
var用户词；
变温节点；
变种克隆；
var输入=0；
函数游戏（）{
userWord=document.getElementById（“text”）.value；
theNode=document.getElementsByClassName（“字母”）[input]；
克隆=node.cloneNode（真）；
文件.正文.附件（克隆）；
对于（var i=0；i<5；i++）{
document.getElementsByCassName（“字母”）[input].children[i].innerHTML=“”+userWord[i].toUpperCase（）+”；
}
输入++；
}

工作演示

---

在
列表中，

中的文本将被视为
子节点中的一个节点。您是否正在尝试制作一个《绞刑人》游戏？不完全一样，想法有点不同，但这只是制作该应用程序的起点。尽管如此，我在JavaScript方面还不是一个初学者哦，我不知道孩子和孩子的区别。我现在明白了。谢谢@随时都可以！如果你能把我的意见作为答案，那就太好了。：）是的，当然！我甚至不知道有这样的选择：）
for (var i = 0; i < 5; i++) {  
    document.getElementsByClassName("letters")[input].children[i].innerHTML = "<h1>" + userWord[i].toUpperCase() + "</h1>";
}

var word = 'МАЈКА';
var userWord;
var theNode;
var theClone;
var input = 0;
function game() {
        userWord = document.getElementById("text").value;
        theNode = document.getElementsByClassName("letters")[input];
        theClone = theNode.cloneNode(true);
        document.body.appendChild(theClone);
        for (var i = 0; i < 5; i++) {  
            document.getElementsByClassName("letters")[input].children[i].innerHTML = "<h1>" + userWord[i].toUpperCase() + "</h1>";
        }
        input++;
}