I can't figure why my code does not work

Question

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.

 function createBoxes(word) { var bigDiv = document.getElementsByClassName('game')[0]; for (var i = 0; i < 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 > 1) { alert('You have to enter one letter') } // Check if the letter match var allNewDivs = document.querySelectorAll('.game div'); for (var i = 0; i < allNewDivs.length; i++) { if (selectedWord[i] === selectedLetter) { allNewDivs[i].innerText = selectedLetter.toUpperCase(); } else { chances-- } }; }); }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hangman</title> <style media="screen"> .game > div { width: 20px; height: 20px; position: relative; display: inline-block; border-bottom: 1px solid black; margin-right: 3px; } </style> </head> <body> <div class="count"> <h3>Chances remained: <strong id="chances"></strong></h3> </div> <div class="game"></div> <form class="form"> <input id='selectText' type="text"> <input type="submit" value="Select"> </form> <script src='script.js'></script> </body> </html>

Answer 1

    function createBoxes(word) {
      var bigDiv = document.getElementsByClassName('game')[0];
      for (var i = 0; i < 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 > 1) {
          alert('You have to enter one letter')
        }

        // Check if the letter match
        var found = false;
        if(chances >0){
            var allNewDivs = document.querySelectorAll('.game div');
            for (var i = 0; i < allNewDivs.length; i++) {
              if (selectedWord[i] === selectedLetter) {
                allNewDivs[i].innerText = selectedLetter.toUpperCase();
                found = true;
              }       
            };
            if(!found){ 
                chances--;
                document.querySelector('#chances').innerText = chances;
            }
        }else{
            alert('you have reached the limit');
        }

      });
    }

Answer 2

Because chance-- is inside the for loop that checks letter by letter. So it reduces once for every letter

I can't figure why my code does not work

Question

2 answers

solution1
0 ACCPTED 2017-01-27 15:30:53

solution2
0 2017-01-27 16:39:52

I can't figure why my code does not work

Question

2 answers

solution1 0 ACCPTED 2017-01-27 15:30:53

solution2 0 2017-01-27 16:39:52

solution1
0 ACCPTED 2017-01-27 15:30:53

solution2
0 2017-01-27 16:39:52