如何使用javascript重复HTML元素n次

Question

I'm trying to print an element, in my case an hr tag some number of times according to the length of a word. This code is for a hangman game I'm trying to recreate. I have looked up similar questions and its not quite what I'm lookin for.

This is my javascript code so far.

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

I'm not sure what to add after retrieving the element. Can someone guide me on how to go about this?

Answer 1

You can also create div's so you can enter letters when the user inputs a character. I've attached an example below.

UPDATE: Added example code to update the dashes with letters based on word

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

Answer 2

Say your word is in some variable named myWord . Get the length of the word by doing:

var myWordLen = myWord.length;

Then you can create HTML elements using Javascript createElement method and appending child elements, information etc as needed. But since you want as many elements as the length of a word, use a loop. Eg:

for(var i=0; i < myWordLen; i++)
{
    var tr1 = document.createElement("hr");
    var someEle = document.getElementById("someID");
    someEle.appendChild(tr1);
}