title: I can't figure why my code does not work
body: <p>Why 'chances--' does not work like I want? I want to subtract only 1. It subtracts the length of the word. Also it subtracts even if the letter match. I tried to console.log 'chances' after the subtract and it logs:
  6,
  5,
  4,
  3,
  2,
  1,
  0
  And then it continues to subtract the length of the 'word' every time I submit the form.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function createBoxes(word) {
    var bigDiv = document.getElementsByClassName('game')[0];
    for (var i = 0; i &lt; word.length; i++) {
      var newDiv = document.createElement('div');
      bigDiv.appendChild(newDiv)
    };
  };
  var selectedWord = 'Romania'.toLowerCase();
  createBoxes(selectedWord);
  
  window.onload = function() {
    var chances = document.querySelector('#chances').innerText = selectedWord.length
    var form = document.querySelector('.form');
  
    form.addEventListener('submit', function(evt) {
      evt.preventDefault();
      // You have to enter one letter
      var selectedLetter = document.querySelector('#selectText').value;
      if (selectedLetter.length &gt; 1) {
        alert('You have to enter one letter')
      }
  
      // Check if the letter match
      var allNewDivs = document.querySelectorAll('.game div');
      for (var i = 0; i &lt; allNewDivs.length; i++) {
        if (selectedWord[i] === selectedLetter) {
          allNewDivs[i].innerText = selectedLetter.toUpperCase();
        } else {
          chances--
        }
      };
    });
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Hangman&lt;/title&gt;
      &lt;style media="screen"&gt;
        .game &gt; div {
          width: 20px;
          height: 20px;
          position: relative;
          display: inline-block;
          border-bottom: 1px solid black;
          margin-right: 3px;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="count"&gt;
        &lt;h3&gt;Chances remained: &lt;strong id="chances"&gt;&lt;/strong&gt;&lt;/h3&gt;
      &lt;/div&gt;
  
      &lt;div class="game"&gt;&lt;/div&gt;
  
      &lt;form class="form"&gt;
          &lt;input id='selectText' type="text"&gt;
          &lt;input type="submit" value="Select"&gt;
      &lt;/form&gt;
    &lt;script src='script.js'&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>