javascript - 刽子手 - 不会显示正确的破折号数量

Question

我是一名 Javascript 学生，正在开发我的 Hangman 游戏。我用于显示 secret 单词的正确破折号数量的循环不起作用。每次只显示一个破折号。感谢帮助。谢谢。

$(document).ready(function(e) {
    // array of letters to choose
    var alphabet = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Z"];

    $("#lettersRemaining").html(alphabet);


$("#newGame").click(function() {    // when user clicks on Start New Game button...

    //  array of words
    var wordCollection = ["mansion", "statue", "gorilla", "notebook", "smartphone", "illustration", "photo", "elegant", "arborist", "keyboard", "calendar", "capital", "textbook", "horrible", "library"];

    // randomly select a word from the wordCollection array
    var theWord = wordCollection[Math.floor(Math.random()*wordCollection.length)]; 
        console.log("theWord is ....");
        console.log(theWord);

    // Get index location of the word randomly selected above       -- Not sure I even need index..??
    var theWordIndex = wordCollection.indexOf(theWord);
        console.log("theWordIndex is ....");
        console.log(theWordIndex);

    // Get number of characters in word randomly selected above
    var theWordLength = theWord.length;
        console.log("theWordLength is ....");
        console.log(theWordLength);


    // display a dash equal to the theWordLength
    for (var i = theWordLength; i > 0; i--) 
    {
        $("#dashes").html(" - ");
    }

Answer 1

问题就在这里:$("#dashes").html("- ");

您在每次迭代时都会覆盖 #dashes 的内部 HTML。您需要的是将当前内容与新破折号“连接”(将两个字符串组合在一起)。

从更实际的 Angular 来看，DOM 访问对性能非常有害。通常不应将它们放入循环中。最佳实践是在执行之前计算所有 DOM 更改。在您的情况下，我将准备一个 dashes 变量，然后在循环执行完毕时设置 #dashes 的内容。

一些帮助您入门的有用资源:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/concat

http://api.jquery.com/text/

http://api.jquery.com/html/