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

Este es mi proyecto. Quiero poner las letras de userWord en los cinco cuadros. ¿Por qué sucede solo con cada segunda letra cuando uso este código JavaScript?

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

Parece que no puedo encontrar la solución. :)

3
Abdullah Hamzic 9 may. 2016 a las 23:36

3 respuestas

La mejor respuesta

La propiedad childNodes devuelve todos los nodos dentro de un elemento, y estos incluyen nodos de texto, el espacio en blanco entre los elementos reales. En su lugar, intente usar children, que solo devuelve elementos secundarios, que es lo que desea.

Por ejemplo:

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

(Probé esto en su CodePen, e hizo exactamente lo que quiere).

Para más detalles ver:

7
Andrew Burgess 9 may. 2016 a las 20:46

Eso sería:

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

O

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

Documentación:

2
w35l3y 9 may. 2016 a las 21:12

ChildNodes está tomando texto, lo que quieres es .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++;
}

¡DEMO DE TRABAJO! http://codepen.io/nicholasabrams/pen/yOZwNP

1
Alpha G33k 9 may. 2016 a las 20:49