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

Question

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

The hacking game is similar to Mastermind, a board game. You will be presented with a list of words, all of the same character length...One of the words is the correct password, and your goal is to guess it.

You choose a word by clicking on it. If you didn't guess correctly, the terminal will display "x/y correct" where x is the number of correct letters, and y is the word length. A letter is correct only if it is in the right spot.

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

我正在尝试创建一个最初显示文本的 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>