Question

http://codepen.io/abdulahhamzic/pen/xVMXQa

这是我的项目。我想把userWord的字母放在五个方框中。当我使用这个JavaScript代码时，为什么只发生每两个字母？

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

我似乎无法弄清楚解决方案。：）

Answer 1

childNodes属性返回元素中的所有节点，这些节点包括文本节点，实际元素之间的空格。相反，请尝试使用children，它只返回子元素，这就是您想要的。

例如：

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

（我在您的CodePen中对此进行了测试，它完全符合您的要求。）

有关详细信息，请参阅：

MDN文档：childNodes
MDN文档：children

Answer 2

那将是：

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

或

Array.prototype.slice.call(document.querySelectorAll(".letters > .letter"), 0, 5).forEach(function (node, index) {
    node.textContent = userWord[index].toUpperCase();
});

文档：

Answer 3

ChildNodes正在抓取文本，你想要的是.children（）

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++;
}

工作演示!! http://codepen.io/nicholasabrams/pen/yOZwNP

JavaScript代码无法按预期工作

3 个答案: