Loop through an array to find the index of a user input, then replace the value at the same index of another array

Question

I am creating a Hangman game (with a twist) in JS/jQuery. I have figured out how to identify the index of the array of the word being guessed based on the user input (when they guess a letter). However, I cannot figure out how to take that index and replace the blank (underscoreArray) with the value of the user input at the same index.

I have tried to do this with a a conditional (at the end of the JS code), but I'm not sure how to make this work.

Upon a correct guess, this conditional should change the html from (for example, if the word is "drag" and the user guesses "d") " _ _ _ _ " to "d _ _ _".

Here is the fiddle and here is the JS:

$(document).ready(function() {
  var words = ["shade", "she mail", "queen"];
  var usedLetters = [];
  var wrongLetters = [];

  $('.play').click(function() {
    var word = words[Math.floor(Math.random() * words.length)];
    var wordLength = word.length;
    var underscores = "";
    for (i = 0; i < wordLength; i++) {
      underscores = underscores + "_ ";
    }

    $('.btn-default').on('click', function() {
      var guess = $(this).text();
      if (jQuery.inArray(guess, usedLetters) === -1) {
        usedLetters.push(guess);
        $('.used').html('<p class="used">Letters used:</p><span>' + usedLetters + '</span>');
      } else {
        alert("You already guessed \"" + guess + "\"!");
      }
      /*Find out if guess = an index of word, and if it does replce the underscore index with the guess*/
      var find = word.indexOf(guess);
      var wordArray = [word];

      //loop through wordArray and where wordArray === find replace same index of underscores with guess.
      for (i = 0; i < wordArray.length; i++) {
        var underscoresArray = [underscores];
        var index = wordArray.indexOf(guess);
        if (index !== -1) {
          underscoresArray[index] = guess;
          $('#words').after(underscoresArray).toString();
        };
      }
    });
  });
});

Please scale this down to a minimal representation of the problem and remove irrelevant code. really not clear what you are trying to do — charlietfl
– charlietfl, Commented Feb 23, 2016 at 15:54
The problem is that you seem to think that the [] syntax converts a string into a list of characters. When you're doing [word] you're creating a list of 1 element, namely 'word'. What you need to do is create a list of characters of your word, which you can do by using the split() method: var characters = word.split(''); — Glubus
– Glubus, Commented Feb 23, 2016 at 15:59
You shouldn't have deleted that code, part of your problem lies within the part you deleted (@charlietfl just went tl;dr on you). Just remove comments, console.logs, script that renders html on the screen (i.e. "gentlemen start your engine"), or put the old code back up there and I'll edit the irrelevant part out for you. — Glubus
– Glubus, Commented Feb 23, 2016 at 16:05

Kristján · Accepted Answer · 2016-02-23 16:15:48Z

2

There are a few problems:

As @Glubus pointed out, [word] doesn't make a character array. Use word.split('').
You set up your underscores string to have spaces in it, making it twice as long as word, so the index needs to be multiplied by two to compensate
You aren't catching every instance of a guessed letter, because indexOf only returns the first one

This should be closer:

var wordArray = word.split('');
var underscoresArray = underscores.split('');
for (var i = 0; i < wordArray.length; i++) {
  // Catch every letter, eg. the "p"s in "popcorn"
  if (wordArray[i] == guess) {
    // Underscored indices are twice the word indices
    // "popcorn" -> "p _ p _ _ _ _"
    underscoresArray[i * 2] = guess;
  };    
}
// Only need to do this once after all changes are made
underscores = underscoresArray.join(''); // Collapse back to string
$('#words').after(underscores);
console.log(underscores);

answered Feb 23, 2016 at 16:15

Kristján

19k5 gold badges55 silver badges65 bronze badges

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

1 Comment

Mindi Torrey Over a year ago

Thanks @Kristján. This is really helpful.

Community · Accepted Answer · 2017-05-23 12:15:36Z

1

Agreed with @Glubus and @Kristjan,

His solution is good, except you should also use join to bring the array back into a string before adding it into the #words element.

Edit: Kristjan updated his solution with join.

For reference, see:

Split
Join

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Feb 23, 2016 at 16:22

Stephen Edwards

696 bronze badges

Collectives™ on Stack Overflow

Loop through an array to find the index of a user input, then replace the value at the same index of another array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related