Hangman game comparing the letter the user selected with the letters in the word to be guesses
<p>This is a simple hangman game i made an alphabet keyboard by buttons so onclick  it should call the function checkLetter to 
check if the letter selected in the word to be guessed or not this part it doesn't run also how to delete the letter on the button when the user clicked on it so prevent him select it again?!<br>
this is my code
begin with html 
then javascript
<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    var B
    ,L
    ,placeholder 
    ,correctGuesses
    ,wrongGuesses
    ,wordToGuess
    ,wordLength
    ,words=[]
    ,wrongletter=true;

    function newGame()
    {
      //initialize all the variables
      placeholder="";
      correctGuesses=0;
      wrongGuesses=0;
      wordToGuess=getWord();
      wordLength=wordToGuess.length;
      
      //make a loop that replaces underscores with the word to be guessed
      for(var i=0;i&lt;wordLength;i++)
      {
       placeholder+="_ ";
      }
       document.getElementById("placeforword").innerHTML=placeholder;
      
      //loop to make a keyboard of buttons 
      //B hold the buttons
     B = '';
    //L hold letters
     L;
    //this loop to get the letters by charcode
    for (var i = 65; 90 &gt;= i; i++) {// A-65, Z-90
      L = String.fromCharCode(i);
      B += '&lt;button id="B2" onclick="getLetter(\''+L+'\');"&gt;' + L + '&lt;/button&gt;';
    }
    document.getElementById("box1").innerHTML = B;
    drawCanvas();
    }
    function getLetter(x)
    {
       checkLetter(x);
    }
    function checkLetter(letter)
    {
     document.getElementById("placeforword").innerHTML=placeholder;
        placeholder=placeholder.split(""); 
              for(var i=0;i&lt;wordLength;i++)
          { 
           if(wordToGuess.charAt(i)===letter.toLowerCase())
           {
               placeholder[i]=letter;
               wrongletter=false;
               correctGuesses++;
           }
           if(correctGuesses===wordLength)
           {
            //if all letters have been guessed that mean u guessed all the correct letters and u win
            //call the drawCanvas
            drawCanvas();
    
           }
          }
           //if ur guess was wrong
     if(wrongGuess)
     {
      badGuesses++;
      drawCanvas();//this function to draw the body of the victim
     } 
     document.getElementById("placeforword").innerHTML=placeholder.join("");
      
    }
function getWord()
{
 var a=["bad","happy","anyotherwords"];
 //choose a random word
 return a[parseInt(Math.random()*a.length)];
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;New Game&lt;/title&gt;
  &lt;style type="text/css"&gt;
    #B1 {
      background-color: #4CAF50;
      color: white;
      font-size: 24px;
    }
    #box2 {
      width: 350px;
      height: 350px;
      padding: 10px;
      background-color: blue;
      text-align: center;
    }
  &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div id="container" style="width:100%;"&gt;
    &lt;div id="left" style="float:left;width:50%;"&gt;
      &lt;div id="newgame"&gt;
        &lt;button onclick="newGame()" id="B1"&gt;New Game&lt;/button&gt;
        &lt;br&gt;
        &lt;br&gt;
      &lt;/div&gt;
      &lt;!--&lt;div id="newgame1"&gt;&lt;/div&gt;--&gt;
      &lt;div id="box1"&gt;&lt;/div&gt;
      &lt;div&gt;
        &lt;p id="placeforword"&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="box2"&gt;
        &lt;h1&gt;Letters u Guessed&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="right" style="float:right;width:50%;"&gt;
      &lt;div&gt;
        &lt;canvas id="stage" width="643" height="643" style="border:5px solid #000000;"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

 </code></pre>
</div>
</div>
</p>