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>

Answer 1

您必须使用div.innerHTML = letter附加该字母，并在创建div时传递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中不起作用

Answer 2

向createDiv函数添加第三个参数，该函数将接受存储在div中的可选内容：

function createDiv(parent, className, content) {  //added ", content"
  let div = document.createElement('div');
  div.className = className;
  if(content) div.innerHTML = content;            //new code
  parent.appendChild(div);
  return div;
}

然后按如下方式更改else子句：

else {
  characters.push(createDiv(word, 'letter', selectedPhrase[i]));  //added ", selectedPhrase[i]"
}

<强>段：

let phrases = [
    "Fish Out Of Water", "The Eifle Tower", "Berlin Syndrome", "bees", "arnold", "palmer"
];
function createDiv(parent, className, content) {
    let div = document.createElement('div');
    div.className = className;
    if(content) div.innerHTML = content;
    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

    let display = document.getElementById("display");
    let word = createDiv(display,'word');
    for (let 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]));

        }

    }
};

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>

Answer 3

您只需传递createDiv函数中的值，然后使用div.innerText或div.innerHTML

进行设置

<强>样本

＆＃13;

let phrases = [
  "Fish Out Of Water", "The Eifle Tower", "Berlin Syndrome", "bees", "arnold", "palmer"
];

function createDiv(parent, className, text) {
  let div = document.createElement('div');
  div.innerText = text || '';
  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', selectedPhrase[i]));
    }
  }
};

loadPhrase(phrases)

＆＃13;

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

＆＃13;

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

＆＃13;

使用reduce()，map()和Object.values()进行实施的另一种方法是获得所需的结果。

<强>样本

＆＃13;

let phrases = ["Fish Out Of Water", "The Eifle Tower", "Berlin Syndrome", "bees", "arnold", "palmer"];

function loadPhrase(phrase) {
  let characters, index = 0,
    rand = Math.floor(Math.random() * phrases.length),
    selectedPhrase = phrase[rand].split("");

  characters = selectedPhrase.reduce((r, v) => {
    if (v == ' ') {
      r[index] = (r[index] || '') + `<div class="space"></div>`;
      index++;
    } else {
      r[index] = (r[index] || '') + `<div class="letter">${v}</div>`;
    }
    return r;
  }, {});
  document.getElementById("display").innerHTML = Object.values(characters).map(v=>`<div class="word">${v}</div>`).join();
};

loadPhrase(phrases)

＆＃13;

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

＆＃13;

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

＆＃13;

拆分阵列，然后将arr推出到各个Div

3 个答案: