How to repeat an html element n number of times using javascript

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?

You would have to get the length of the string from your randomly selected item, then loop over the length and print out your lines — Huangism
– Huangism, Commented Dec 13, 2018 at 16:57

Win · Accepted Answer · 2018-12-15 23:57:10Z

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

edited Dec 15, 2018 at 23:57

answered Dec 13, 2018 at 17:08

Win

5,5942 gold badges18 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Devika Sujith Over a year ago

Thanks! This should be helpful.

Devika Sujith Over a year ago

How would I go about this code if I want to replace the dashes with the correct letters?

Win Over a year ago

@Devika.S Added an example in post but please reframe from additional questions on top of an existing question

Rahul Bharadwaj · Accepted Answer · 2018-12-13 16:59:17Z

0

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

answered Dec 13, 2018 at 16:59

Rahul Bharadwaj

2,8242 gold badges20 silver badges30 bronze badges

4 Comments

Devika Sujith Over a year ago

Thanks, will try. I have specific css for the hr element. How will I link that with the create element?

Rahul Bharadwaj Over a year ago

If you have CSS for some class (like .foo {color:red} ), all you need to do is add that that class foo while creating the new hr element by doing: tr1.className += " foo";

Devika Sujith Over a year ago

So should I be putting this in my getRandomWord() function?

Rahul Bharadwaj Over a year ago

I don't know that, depends on your code logic. All I have shown is a generic way to create elements, add class to them and append them to another element as needed.

Franc Jerez · Accepted Answer · 2022-11-14 09:33:55Z

0

What about this way?

myElement.innerHTML = `<...>`.repeat(words.length)

answered Nov 14, 2022 at 9:33

Franc Jerez

1633 silver badges6 bronze badges

Collectives™ on Stack Overflow

How to repeat an html element n number of times using javascript

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related