javascript - 如何使用javascript重复一个html元素n次

Question

我正在尝试根据单词的长度打印一个元素，在我的例子中是一个 hr 标签。该代码适用于我正在尝试重新创建的刽子手游戏。我查过类似的问题，但它不完全是我要找的。

这是迄今为止我的 JavaScript 代码。

var words = ['Quaffle', 'Bludger', 'Golden Snitch', 'Time-Turner', 
'Pensieve', 'Mirror of Erised'];

function getRandomWord(){
   var randomIndex = words[Math.floor(Math.random()* words.length)]; 
   alert(randomIndex);
}

function printDashes(){
   var dashes = document.getElementById("dash")
}

getRandomWord()
printDashes()

我不确定检索元素后要添加什么。有人可以指导我如何解决这个问题吗？

Answer 1

您还可以创建 div，以便在用户输入字符时可以输入字母。我在下面附上了一个示例。

更新:添加了示例代码，根据单词用字母更新破折号

var elem = document.getElementById('container');
var guess = document.getElementById('guess');
var word = "Hello";

// draw empty dashes
var drawDashes = function(numberOfDashes) {
  for (var i = 0; i < numberOfDashes; i++) {
    var el = document.createElement('div');
    el.classList = 'dash';
    
    // we draw an empty character inside so that the element
    // doesn't adjust height when we update the dash later with a 
    // letter inside
    el.innerHTML = '&nbsp;';

    elem.appendChild(el);
  }
}

// update dash with a letter based on index
var updateDash = function(index, letter) {
  elem.children[index].innerHTML = letter;
}

guess.addEventListener('keyup', function(evt) {

  // split the word up into characters
  var splitWord = word.split('');
   
  // check to see if the letter entered matches any of the
  // words characters
  for (var i = 0; i < splitWord.length; i++ ) {
  
    // it is important we convert them to lowercase or 
    // else we might get a mismatch because of case-sensitivity
    if (evt.key.toLowerCase() === splitWord[i].toLowerCase()) {
    
      // update dash with letter based on index
      updateDash(i, evt.key.toLowerCase());
    }
  }
  
  // clear out the value
  this.value = '';
});

drawDashes(word.length);

body {
  font-family: sans-serif;
}

.dash {
  height: 50px;
  width: 50px;
  margin: 0 10px;
  display: inline-block;
  border-bottom: 2px solid black;
  font-size: 32px;
  font-weight: bold;
  text-align: center;
}

#guess {
  height: 50px;
  width: 50px;
  padding: 0; 
  font-size: 32px;
  text-align: center;
}

<div id="container"></div>

<h4>Type a letter</h4>
<input id="guess" type="text"/>