使用 for 循环创建动态 DOM 元素

Question

我正在使用原版 Javascript 重新创建 Fallout 终端游戏 --- 游戏的主要元素之一是将您选择的单词与计算机选择的单词进行比较。

黑客游戏类似于棋盘游戏 Mastermind。你将会 显示一个单词列表，所有字符长度都相同...其中一个单词是正确的密码，您的目标是猜测它。

您可以通过单击来选择一个单词。如果你没猜对， 终端将显示“x/y 正确”，其中 x 是 正确的字母，y是字长。只有当一个字母是正确的 它在正确的位置。

我能够让比较方面在控制台中工作，我现在正试图让它显示在页面本身上。

我正在尝试创建一个最初显示文本的 DOM 元素：“还剩四次尝试。[] [] [] []”，然后根据您进行的移动次数进行更新。

我觉得逻辑在那里，但我对 JavaScript 和 DOM 的流利程度不足以让事情正常进行。

最初我认为 playerAttempts 将是一个数组，我会将结果推送到...？但现在我不确定这是最好的选择。

这是我所拥有的：

var giantArray = []; // combination of var garbage and var words

var goalWord = ""; // word that the computer chose to be the "goal"  // STRING

var userWord = ""; // the current word that the user selected // STRING

var playerAttempts = []; // how many past attempts the user has made

---

///// ======== ////// ATTEMPTS ///// ======== //////

// this shows how many attempts the player has left

let createAttempts = function() {

var bottomScreen = document.querySelector('.bottom-screen');
var oneLife = document.createElement('oneLife');


  for (var i = 0; i < 1; i++) {

    if (playerAttempts.length === 4) {
      console.log("Four attempts remaining. [] [] [] []");
      } else if
      (playerAttempts.length === 3) {
        console.log("Three attempts remaining. [] [] []");
      } else if
      (playerAttempts.length === 2) {
        console.log("Two attempts remaining. [] []");
      } else if
        (playerAttempts.length === 1) {
        console.log("!! Warning: Lock out pending !! []");
      } else {
        console.log("This terminal has been locked. Please contact your administrator.");
        break;
      }
  }

  panels.appendChild(attempts);
  screen.appendChild(panels);

}

createAttempts();

---

///// ======== ////// RANDOM WORDS, GIANT ARRAY, and COMPARING GOALWORD TO USERWORD  ///// ======== //////

var shuffledWords = shuffle(words); // randomly pick an index between 0 and 48

function clickFunc(evt) {

  if (evt.target.innerText.slice(1) === goalWord) { // need .slice method to eliminate space character

  console.log('Welcome back' + '. ');
  } else {
  console.log('try again')
  }

// update user word (or else it'll be an empty string)

// on click, compare user word to goalWord

}

let createWordElems = function() {

  for (var i = 0; i <= 48; i++) {
    var singleWord = document.createElement('span') // creating 'p' element, calling it singleWord
    singleWord.innerHTML = " " + shuffledWords[i]; // setting the content of the first word

    singleWord.addEventListener("click", clickFunc); // set onClick event for word

    var giantArrayElement = document.querySelector('.giant-array') // selecting .giant-array and storing it in var
    giantArrayElement.appendChild(singleWord); // appending singleWord to giantArrayElement
  }
}
createWordElems();

---

HTML：

<div class="top-text"> <!-- level 4 -->
  <ul>
    <li>______ INDUSTRIES (TM) TERMALINK PROTOCOL</li>
    <li>ENTER YOUR PASSWORD</li>
  </ul>
</div>

<div class="attempts"></div> <!-- level 4 -->

<div class="row-starts"></div> <!-- level 4 -->

  <ul class="column1"> <!-- level 5 -->
    <li>0xN0H1</li>
    <li>0xN0H2</li>
    <li>0xN0H6</li>
    <li>0xN0H0</li>
    <li>0xN0H7</li>
    <li>0xN0H3</li>
    <li>0xN0H4</li>
    <li>0xN0H5</li>
    <li>0xN0H9</li>
    <li>0xN0H8</li>
    <li>1xN0H1</li>
  </ul>
<div class="giant-array"></div> <!-- level 4 -->

<div class="bottom-screen"></div> <!-- level 4 -->

Answer 1

为什么不直接做：

<div class="top-text"> <!-- level 4 -->
  <ul>
    <li>______ INDUSTRIES (TM) TERMALINK PROTOCOL</li>
    <li>ENTER YOUR PASSWORD</li>
  </ul>
</div>

<div id="attempts"></div> <!-- level 4 -->

<div class="row-starts"></div> <!-- level 4 -->

  <ul class="column1"> <!-- level 5 -->
    <li>0xN0H1</li>
    <li>0xN0H2</li>
    <li>0xN0H6</li>
    <li>0xN0H0</li>
    <li>0xN0H7</li>
    <li>0xN0H3</li>
    <li>0xN0H4</li>
    <li>0xN0H5</li>
    <li>0xN0H9</li>
    <li>0xN0H8</li>
    <li>1xN0H1</li>
  </ul>
<div id="giant-array"></div> <!-- level 4 -->

<div class="bottom-screen"></div> <!-- level 4 -->

<script>
  var giantArray = [];
  var goalWord = "";
  var userWord = "";
  var playerAttempts = 0;

  var shuffledWords = shuffle(words); //Don't have this function or the variable

  document.addEventListener("DOMContentLoaded", function(event) {
    createAttempt();
    createWordElements();
  });

  function $(e) {
    return document.getElementById(e);
  }
  function createAttempt() {
    //I am removing this for loop as it only ever fires once so it's unnecessary
    //for (var i = 0; i < 1; i++) {
    switch (playerAttempts) {
      case 0:
        $('attempts').innerHTML = "Four attempts remaining. [] [] [] []";
        break;
      case 1:
        $('attempts').innerHTML += "Three attempts remaining. [] [] []<br>";
        break;
      case 2:
        $('attempts').innerHTML += "Two attempts remaining. [] []<br>";
        break;
      case 3:
        $('attempts').innerHTML += "!! Warning: Lock out pending !! []<br>";
        break;
      default:
        $('attempts').innerHTML += "This terminal has been locked, and the IP logged. Please contact your administrator.";
        break;
    }
  //}  
    playerAttempts++;
  }



  function clickFunc(e) {
    if (e.target.innerText.slice(1) === goalWord) {
      console.log('Welcome back' + '. ');
    } 
    else {
      console.log('try again');
      createAttempt();
    }
  }

  function createWordElements() {
    var giantArrayElement = $('giant-array');
    var singleWord;
    for (var i = 0; i <= 48; i++) {
      singleWord = document.createElement('span');
      singleWord.innerHTML = " " + shuffledWords[i];  //I don't have this variable, and the either

      singleWord.addEventListener("click", clickFunc);
      giantArrayElement.appendChild(singleWord);
    }
  }
</script>