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

Question

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

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

您可以通过单击选择一个单词。如果您没有正确猜测，终端将显示“x / y correct”，其中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>