.replace always putting the character in the first position

Question

I'm trying to create a hangman game. I need to replace the underscores in the variable "underscore" with the letter in the variable "letter" when the letter matches what's in the variable "word". Any way of doing this?

for( i = 0; i < word.length; i++ ) {
    if (word[i] === letter) {
        underscore = underscore.replace(underscore.charAt(i*2), letter);
    }
}

Above is the specific part of my code that I have trying to replace it at the moment but it will only replace the next underscore after a letter/beginning no matter what I do. Below is my full code if you need any more details of how it works.

Thanks in advance.

/* Hangman Game CSS File */
body
{
 background-color: #1B264F;
}

#main {
 background-color: #5386E4;
 height: 97vh; 
    width: 95vw;
    vertical-align: middle;

}
canvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: auto;
    margin-bottom: auto;
}

<!DOCTYPE html>
<html>
 <head>
  <title>Hangman by Lachlan Teale</title> 
  <meta name="description" content="Lachlan Teale's Hangman Game 2015">
  <meta name="keywords" content="hangman, lachlan, teale, Javascript">
  <meta charset="UTF-8">
  <meta name="author" content="Lachlan Teale">
  <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
 <canvas id="main" width="1920" height="1080" style="border:1px solid #d3d3d3;"></canvas>

 <script type="text/javascript">

 //setting variables
  var canvas = document.getElementById('main');
      var context = canvas.getContext('2d');
       var underscore = "";
       var letter;
       var complete = false;

 //list of words
  var wordList = ["apple", "peach", "pear", "mango", "banana", "paper", "pens", "laptop", "desk", "chair", "star", "sky", "moon", "sun", "planets"];

 //picking a random word from the list
  var word = wordList[Math.floor(Math.random() * wordList.length)];

 //print out the underscores for the number of letters
  for (i = 0; i < word.length; i++) {
   var underscore = underscore + "_ ";
  }

  context.font = '50pt Calibri';
       context.textAlign = 'center';
       context.fillStyle = '#E2E2E3';
       context.fillText(underscore, canvas.width * 0.5, canvas.height * 0.70);

    //correct letter text
       context.font = 'bold 30pt Calibri';
       context.textAlign = 'center';
       context.fillStyle = '#E2E2E3';
       context.text
       context.fillText("Correct Letters", canvas.width * 0.08, canvas.height * 0.05);

    //Wrong Letter text
       context.font = 'bold 30pt Calibri';
       context.textAlign = 'center';
       context.fillStyle = '#E2E2E3';
       context.text
       context.fillText("Wrong Letters", canvas.width - (canvas.width * 0.08), canvas.height * 0.05);

 //checking which button is pressed
  window.addEventListener('keydown', function(event) {
   if ( event.keyCode >= 65 && event.keyCode <= 90 ) {
       context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height);  
          letter = String.fromCharCode( event.keyCode ).toLowerCase();
          context.font = '50pt Calibri';
         context.textAlign = 'center';
         context.fillStyle = '#E2E2E3';
         context.fillText(letter, canvas.width * 0.5, canvas.height * 0.85);
        }
  });

 //checking if back key is pressed
  document.addEventListener('keydown', function(event) {                     
      if ( event.keyCode == 8 ) {              
       context.clearRect(0, canvas.height * 0.80, canvas.width, canvas.height); 
      }
     });

 //checking if enter is pressed
       document.addEventListener('keydown', function(event) {                     
      if( event.keyCode == 13 ) {

    //checking if letter is in the word
       alert(word);
            
    for( i = 0; i < word.length; i++ ) {
     if (word[i] === letter) { 
         underscore = underscore.replace(underscore.charAt(i*2), letter);
     }
    }

    context.clearRect(canvas.width * 0.4, canvas.height * 0.3, canvas.width *0.7, canvas.height * 70);
       context.font = '50pt Calibri';
         context.textAlign = 'center';
         context.fillStyle = '#E2E2E3';
         context.fillText(underscore, canvas.width * 0.5, canvas.height * 0.70);

         alert(underscore); 
   }
     }); 

  
  </script>
 </body>
</html>

probabily referring to the accepted answer in this thread will help http://stackoverflow.com/questions/1431094/how-do-i-replace-a-character-at-a-particular-index-in-javascript — Daniele Sassoli, Mar 16 '15 at 09:31

9y7h0n · Answer 1 · 2015-03-16T09:53:04.453

0

Since all the characters in the string underscore are "_", when you run underscore.replace(underscore.charAt(i*2), letter); it looks through the string for the character at i*2, and then replaces the first instance of that character with letter (you can find a doc for this here: http://www.w3schools.com/jsref/jsref_replace.asp).

What you may want to do instead is to define a function like the following:

function replaceAt(str,index,chr) {
    if(index > str.length-1) return str;
    return str.substr(0,index) + chr + str.substr(index+1);
}

and use that function instead of replace()

You can declare that function and then call it where you called .replace() before. When you call it, just replace str with the string (underscore), index with the index where you want the new letter, and ltr with the new letter you want (letter).

edited Mar 16 '15 at 09:53

answered Mar 16 '15 at 09:32

9y7h0n

326
1
8

That looks like what I want to do, but as I'm new to this and have no clue where to start, could you possibly show me how i'd put this into my code? – MrTeale Mar 16 '15 at 09:44
Edited to be a bit more in depth – 9y7h0n Mar 16 '15 at 09:53
No problem! Don't forget to up vote and accept if it answers your question! Thanks! – 9y7h0n Mar 16 '15 at 09:56
Tried editing it to get it to work, no luck I'm sorry. I'm quite terrible at this stuff, any chance of a jsfiddle or something? – MrTeale Mar 16 '15 at 10:34

.replace always putting the character in the first position

1 Answers1