How to replace multiple elements with the same element in jQuery?

Question

I am trying to make the Hangman game in the browser. I generate a random word, then display one empty box for each letter of the word, and the user will be able to click a button with a letter to try to guess if the random word contains this letter. If it does, then all empty boxes representing that letter get replaced with a box with that letter written inside.

My problem is, if the word generated contains the letter clicked multiple times, only the last occurrence gets replaced in the end, which I figured would be caused by my wrong usage of jQuery's 'replaceWith'. I hope I didn't make this sound too complicated, if you have any question, please ask away!

So here is my code:

// Get all occurences of the clicked letter and push their positions into array

  function letterClicked(id) {
    var positionsOfLetter = [];
    for (var i = 0; i < randomWord.length; i++) {
      if (randomWord[i] == id) {
        positionsOfLetter.push(i);
      }
    }
    // Replace each box at position that contains the letter clicked with a box containing the letter clicked

    positionsOfLetter.forEach(position => {
      $('#' + position).replaceWith($("#" + id));
    });
  }

You're going to have to clone the element you want repeated. replaceWith(existingDomElement) is going to move the existing element to the new place, not clone it — Taplar
– Taplar, Commented Nov 23, 2018 at 15:49
Do you use duplicated id's to identify the letters? If so that's your problem. I'd need to be unique. Will be a lot easier to help you if you show your html. Or even better create a snippet that reproduces your problem. — Mark Baijens
– Mark Baijens, Commented Nov 23, 2018 at 15:52

Shushan · Accepted Answer · 2018-11-23 15:53:53Z

2

This row

$('#' + position).replaceWith($("#" + id));

returns the same element every time, causing it to move around until it settles at the last iteration of the loop. replacing it with

$('#' + position).replaceWith($("#" + id).clone());

should do the trick.

answered Nov 23, 2018 at 15:53

Shushan

1,2251 gold badge10 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

How to replace multiple elements with the same element in jQuery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related