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

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

javascript arrays function for-loop dom

Javascript 使用for循环创建动态DOM元素,javascript,arrays,function,for-loop,dom,Javascript,Arrays,Function,For Loop,Dom,我正在使用香草Javascript重新创建Fallout终端游戏——游戏的主要元素之一是将您选择的单词与计算机选择的单词进行比较黑客游戏类似于棋盘游戏Mastermind。你会的显示一个单词列表，所有单词长度相同…其中一个单词是正确的密码，您的目标是猜测它你可以通过点击来选择一个单词。如果你猜错了，终端将显示“x/y正确”，其中x是正确的字母，y是单词长度。只有在下列情况下，字母才是正确的它在正确的位置我能够让compare方面在控制台中工作，现在我正试图让它显示在页面本身上我正

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

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

你可以通过点击来选择一个单词。如果你猜错了，终端将显示“x/y正确”，其中x是正确的字母，y是单词长度。只有在下列情况下，字母才是正确的它在正确的位置

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

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

我觉得逻辑是存在的，但我对JavaScript和DOM不够流利，无法让事情正常进行

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

以下是我所拥有的：

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//////====//////
//这显示玩家还剩多少次尝试
让createAttempts=function（）{
var bottomScreen=document.querySelector（“.bottomScreen”）；
var oneLife=document.createElement（'oneLife'）；
对于（变量i=0；i<1；i++）{
如果（playeratests.length==4）{
log（“剩余四次尝试[][]）；
}否则如果
（playeratests.length==3）{
log（“还剩三次尝试。[][]]”）；
}否则如果
（playeratests.length==2）{
log（“还有两次尝试。[][]”）；
}否则如果
（playeratests.length==1）{
日志（！！警告：锁定挂起！！[]）；
}否则{
console.log（“此终端已被锁定。请与管理员联系。”）；
打破
}
}
小组。追加（尝试）；
屏幕。子屏幕（面板）；
}
创建尝试（）；

////====/////////RANDOM WORDS，GIANT ARRAY，并将GOALWORD与USERWORD进行比较////====//////
var shuffledWords=shuffle（单词）；//随机选择一个介于0和48之间的索引
函数clickFunc（evt）{
if（evt.target.innerText.slice（1）==goalWord）{//需要.slice方法来消除空格字符
log（'Welcome back'+'）；
}否则{
console.log（'重试'）
}
//更新用户word（否则它将是一个空字符串）
//单击后，将用户词与目标词进行比较
}
让createWordElems=function（）{
对于（var i=0；i

0xN0H1
0xN0H2
0xN0H6
0xN0H0
0xN0H7
0xN0H3
0xN0H4
0xN0H5
0xN0H9
0xN0H8
1xN0H1

为什么不干脆做：

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



______工业（TM）TERMALINK协议
输入您的密码


0xN0H1
0xN0H2
0xN0H6
0xN0H0
0xN0H7
0xN0H3
0xN0H4
0xN0H5
0xN0H9
0xN0H8
1xN0H1

var giantArray=[]；
var goalWord=“”；
var userWord=“”；
var Playerats=0；
var shuffledWords=shuffle（words）；//没有此函数或变量
document.addEventListener（“DOMContentLoaded”），函数（事件）{
createtrument（）；
createWordElements（）；
});
功能$（e）{
返回文档.getElementById（e）；
}
函数createtrunt（）{
//我删除这个for循环，因为它只触发一次，所以没有必要
//对于（变量i=0；i<1；i++）{
开关（播放尝试）{
案例0：
$（'attempts'）.innerHTML=“还有四次尝试。[][]”；
打破
案例1：
$（'attempts'）。innerHTML+=“还有三次尝试。[][][]
”；
打破
案例2：
$（'attempts'）。innerHTML+=“还剩下两次尝试。[][]
”；
打破
案例3：
$（'attempts'）。innerHTML+=“！！警告：锁定挂起！！[]
”；
打破
违约：
$（'attempts'）。innerHTML+=“此终端已被锁定，IP已被记录。请与管理员联系。”；
打破
}
//}  
playerats++；
}
函数clickFunc（e）{
if（例如target.innerText.slice（1）==目标词）{
log（'Welcome back'+'）；
} 
否则{
log（“重试”）；
createtrument（）；
}
}
函数createWordElements（）{
var giantArrayElement=$（“巨型阵列”）；
var单字；
对于（var i=0；i
///// ======== ////// 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();

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

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