Creating dynamic DOM element using for loop

Question

I'm recreating the Fallout terminal game using vanilla Javascript---one of the game's main elements is comparing the word you selected to the word that the computer chose.

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.

I was able to get the compare aspect working in the console, and I'm now trying to get that to show up on the page itself.

I'm trying to create a DOM element that initially shows the text: "Four attempts remaining. [] [] [] []" and then updates depending on how many moves you've made.

I feel like the logic is there, but I'm not fluent enough in JavaScript and the DOM to get things working.

Originally I thought playerAttempts would be an array that I'd push the results into...? But now I'm not sure that's the best option.

Here's what I have:

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();

---

The 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

Why not just do:

<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>