javascript - 拆分数组，然后将 arr 推送到各个 Div

Question

我正在用 Javascript 创建一个命运之轮类型的游戏。如果您查看代码，我正在拆分短语数组，然后创建一个 div 来存储短语的字母。这是我卡住的地方。

如何将字符串中的字母从数组存储到单个 div。因此，创建每个字母的效果都有自己的“正方形”或 div。

let phrases = [
    "Fish Out Of Water", "The Eifle Tower", "Berlin Syndrome", "bees", "arnold", "palmer"
];
function createDiv(parent,className){
    let div = document.createElement('div');
    div.className = className;
    parent.appendChild(div);
    return div;
}
function loadPhrase(phrase) {
    let characters = [];
    let rand = Math.floor(Math.random() * phrases.length);
    let selectedPhrase = phrase[rand].split("");
    //display phrase to screen
console.log(selectedPhrase)

    let display = document.getElementById("display");
    let word = createDiv(display,'word');
    for (i = 0; i < selectedPhrase.length; i++){
        
        if(selectedPhrase[i] == ' '){
            characters.push(createDiv(word,'space'));
            word = createDiv(display, 'word');
        }else{
            characters.push(createDiv(word, 'letter'));

        }

    }


    console.log(characters)
};

loadPhrase(phrases)

#display{
    background:blue;
    width:750px;
    margin:auto;
}
.word {
    margin-bottom: 60px;
    display: inline-block;

}

.letter {
    display:block;
    float:left;
    border-bottom:2px solid white;
    width:50px;
    height:100px;
    font-size: 50px;
    text-align: center;
    color: white;
    margin:10px;
    margin-top:0px;
}
.space{
    float:left;
    margin:10px;
    width:21px;
}

<div id="display">
                


            </div>

标签： javascripthtmlcss

Answer 1

您必须在创建 div 时使用附加字母div.innerHTML = letter并传递。letter请参阅我所做的更正。

let phrases = [
    "Fish Out Of Water", "The Eifle Tower", "Berlin Syndrome", "bees", "arnold", "palmer"
];
function createDiv(parent,className,letter = ''){
    let div = document.createElement('div');
    div.className = className;
    div.innerHTML = letter;
    parent.appendChild(div);
    return div;
}
function loadPhrase(phrase) {
    let characters = [];
    let rand = Math.floor(Math.random() * phrases.length);
    let selectedPhrase = phrase[rand].split("");
    //display phrase to screen
//console.log(selectedPhrase)

    let display = document.getElementById("display");
    let word = createDiv(display,'word');
    for (i = 0; i < selectedPhrase.length; i++){
        
        if(selectedPhrase[i] == ' '){
            characters.push(createDiv(word,'space'));
            word = createDiv(display, 'word');
        }else{
            characters.push(createDiv(word, 'letter',selectedPhrase[i]));

        }

    }


    //console.log(characters)
};

loadPhrase(phrases)

#display{
    background:blue;
    width:750px;
    margin:auto;
}
.word {
    margin-bottom: 60px;
    display: inline-block;

}

.letter {
    display:block;
    float:left;
    border-bottom:2px solid white;
    width:50px;
    height:100px;
    font-size: 50px;
    text-align: center;
    color: white;
    margin:10px;
    margin-top:0px;
}
.space{
    float:left;
    margin:10px;
    width:21px;
}

<div id="display">
</div>

编辑

正如@Rick Hitchcock 指出的那样，初始化letter变量的策略目前在 IE 中不起作用