I'm newer to JS, finding it very useful, but I've encountered a snag with my latest learning project. It's a simple three-word hangman game. The problem is that the letters of the correct word are not being stored in the .innerHTML and displayed when they are chosen, like they are supposed to. The incorrect letters display & register properly. I have spent hours pouring over this code and I cannot find where I'm going wrong and why this isn't working the way it is supposed to. Any help will be immensely appreciated! My doctype is declared, I've just taken that and the styling to make it a little less lengthy:

<code>
<html>
<head>
<script type="text/javascript">

var myWordArray = new Array ('FIRST', 'FIRES', 'REEFS');
var wordIndex;
var myWord;

var myWordSoFar = "";

var numGuesses = 0;
var myTimerCntr = 0;

var myLetter1Found = 'N';
var myLetter2Found = 'N';
var myLetter3Found = 'N';
var myLetter4Found = 'N';
var myLetter5Found = 'N';

var myColorIndex = 0;
var myTimer;

var myLetter1, myLetter2, myLetter3, myLetter4, myLetter5;
var myLetter1Found, myLetter2Found, myLetter3Found, myLetter4Found, myLetter5Found;

var myMistake;
var myMistake1, myMistake2, myMistake3, myMistake4, myMistake5, myMistake6, myMistake7;
var alreadyEntered;

var myColorArray = new Array('blue', 'olive', 'green', 'red', 'orange');

var myWinLose;


document.onkeydown = checkKeycode;

function checkKeycode(e)
{

var keycode;
if (window.event)
{
keycode = window.event.keyCode;
}
else if (e) keycode = e.which;

var myCharacter = String.fromCharCode(keycode);

var myCharacterUpper = myCharacter.toUpperCase();

var myFoundPos = myWord.indexOf(myCharacterUpper);

if (myFoundPos < 0)
{
numGuesses++;

if (numGuesses > 7)
{
myWinLose.style.visibility = 'visible';
myWinLose.style.backgroundColor = "black";
myWinLose.style.color = "white";
myWinLose.innerHTML = "YOU LOSE!";
numGuesses = 0;
myTimerCntr = 0;

myLetter1.innerHTML = myWordArray[wordIndex].substr(0, 4);
myLetter2.innerHTML = myWordArray[wordIndex].substr(1, 4);
myLetter3.innerHTML = myWordArray[wordIndex].substr(2, 4);
myLetter4.innerHTML = myWordArray[wordIndex].substr(3, 4);
myLetter5.innerHTML = myWordArray[wordIndex].substr(4, 4);
}
else
{
mistakeID = 'mistake' + numGuesses;
myMistake = document.getElementById(mistakeID);
myMistake.innerHTML = myCharacter;
}
}
else
{

alreadyEntered = myWordSoFar.indexOf(myCharacterUpper);

if (alreadyEntered < 0)
{
}
else
{
alert("You Already Entered: " + myCharacterUpper + "!");
}


if (myWordArray[wordIndex].substr(0, 4) == myCharacterUpper)
{
myLetter1.innerHTML = myCharacterUpper;
myLetter1Found = 'Y';
}

if (myWordArray[wordIndex].substr(1, 4) == myCharacterUpper)
{
myLetter2.innerHTML = myCharacterUpper;
myLetter2Found = 'Y';
}

if (myWordArray[wordIndex].substr(2, 4) == myCharacterUpper)
{
myLetter3.innerHTML = myCharacterUpper;
myLetter3Found = 'Y';
}

if (myWordArray[wordIndex].substr(3, 4) == myCharacterUpper)
{
myLetter4.innerHTML = myCharacterUpper;
myLetter4Found = 'Y';
}

if (myWordArray[wordIndex].substr(4, 4) == myCharacterUpper)
{
myLetter5.innerHTML = myCharacterUpper;
myLetter5Found = 'Y';
}

if (myLetter1Found == 'Y' && myLetter2Found == 'Y' && myLetter3Found == 'Y' && myLetter4Found == 'Y' && myLetter5Found == 'Y')
{
myWinLose.style.visibility = 'visible';
myWinLose.style.backgroundColor = "yellow";
myWinLose.style.color = "red";
myWinLose.innerHTML = "YOU WON!";
}

myWordSoFar = myWordSoFar + myCharacterUpper;
}
}

function startNewGame()
{

wordIndex = Math.round( (2 * Math.random()) );
myWord = myWordArray[wordIndex];

numGuesses = 0;
myTimerCntr = 0;

myWordSoFar = "";

myLetter1Found = 'N';
myLetter2Found = 'N';
myLetter3Found = 'N';
myLetter4Found = 'N';
myLetter5Found = 'N';

myLetter1 = document.getElementById('letter1');
myLetter1.innerHTML = "";
myLetter2 = document.getElementById('letter2');
myLetter2.innerHTML = "";
myLetter3 = document.getElementById('letter3');
myLetter3.innerHTML = "";
myLetter4 = document.getElementById('letter4');
myLetter4.innerHTML = "";
myLetter5 = document.getElementById('letter5');
myLetter5.innerHTML = "";

myMistake1 = document.getElementById('mistake1');
myMistake1.innerHTML = "";
myMistake2 = document.getElementById('mistake2');
myMistake2.innerHTML = "";
myMistake3 = document.getElementById('mistake3');
myMistake3.innerHTML = "";
myMistake4 = document.getElementById('mistake4');
myMistake4.innerHTML = "";
myMistake5 = document.getElementById('mistake5');
myMistake5.innerHTML = "";
myMistake6 = document.getElementById('mistake6');
myMistake6.innerHTML = "";
myMistake7 = document.getElementById('mistake7');
myMistake7.innerHTML = "";

myWinLose = document.getElementById('winlose');
myWinLose.style.visibility = 'hidden';

myTimer = setInterval("changeNow()",200);

}

function changeNow()
{
myTimerCntr++;

if (myTimerCntr > 11)
{
clearInterval(myTimer);

myLetter1.style.backgroundColor = "yellow";
myLetter2.style.backgroundColor = "yellow";
myLetter3.style.backgroundColor = "yellow";
myLetter4.style.backgroundColor = "yellow";
myLetter5.style.backgroundColor = "yellow";

myTimerCntr = 0;
myColorIndex = 0;


} else {

if (myColorIndex == 0)
{
myLetter1.style.backgroundColor = myColorArray[0];
myLetter2.style.backgroundColor = myColorArray[1];
myLetter3.style.backgroundColor = myColorArray[2];
myLetter4.style.backgroundColor = myColorArray[3];
myLetter5.style.backgroundColor = myColorArray[4];
}

if (myColorIndex == 1)
{
myLetter1.style.backgroundColor = myColorArray[4];
myLetter2.style.backgroundColor = myColorArray[0];
myLetter3.style.backgroundColor = myColorArray[1];
myLetter4.style.backgroundColor = myColorArray[2];
myLetter5.style.backgroundColor = myColorArray[3];
}

if (myColorIndex == 2)
{
myLetter1.style.backgroundColor = myColorArray[3];
myLetter2.style.backgroundColor = myColorArray[4];
myLetter3.style.backgroundColor = myColorArray[0];
myLetter4.style.backgroundColor = myColorArray[1];
myLetter5.style.backgroundColor = myColorArray[2];
}

if (myColorIndex == 3)
{
myLetter1.style.backgroundColor = myColorArray[2];
myLetter2.style.backgroundColor = myColorArray[3];
myLetter3.style.backgroundColor = myColorArray[4];
myLetter4.style.backgroundColor = myColorArray[0];
myLetter5.style.backgroundColor = myColorArray[1];
}

if (myColorIndex == 4)
{
myLetter1.style.backgroundColor = myColorArray[1];
myLetter2.style.backgroundColor = myColorArray[2];
myLetter3.style.backgroundColor = myColorArray[3];
myLetter4.style.backgroundColor = myColorArray[4];
myLetter5.style.backgroundColor = myColorArray[0];
}

myColorIndex++;

if (myColorIndex > 4)
{
myColorIndex = 0;
}
}
}

</script>
</head>

<body style="background-color: #87CEEB; color: DarkBlue; font-family: Arial, Helvetica, sans-serif;">
<h1>Guess the Word!</h1>

<div id="winlose"></div> <!-- This is where the message that you Won or Lost will go -->

<!-- This is where the letters display for correct guesses -->
<div id="letter1" class="letter" style="left: 100px;"></div>
<div id="letter2" class="letter" style="left: 220px;"></div>
<div id="letter3" class="letter" style="left: 340px;"></div>
<div id="letter4" class="letter" style="left: 460px;"></div>
<div id="letter5" class="letter" style="left: 580px;"></div>


<!-- This is where the letters display for incorrect guesses -->
<div id="mistake1" class="mistake" style="left: 200px;"></div>
<div id="mistake2" class="mistake" style="left: 260px;"></div>
<div id="mistake3" class="mistake" style="left: 320px;"></div>
<div id="mistake4" class="mistake" style="left: 380px;"></div>
<div id="mistake5" class="mistake" style="left: 440px;"></div>
<div id="mistake6" class="mistake" style="left: 500px;"></div>
<div id="mistake7" class="mistake" style="left: 560px;"></div>

<!-- This is the button to start a New Game-->
<div id="startnewgame">
<form>
<input type="button" id="newgame" value="Start New Game!" onclick="startNewGame();">
</form>
</div>

<div id="rules">
</div>

</body>
</html>
</code>