Am I understanding For Loops correctly? What am I missing? - JavaScript

Question

This is a little game I am making to try to practice JavaScript with, basically the player picks a four color code and the computer has ten turns to guess it. I set up two for loops, one that runs through the player's four color code and one that run's through the computer's code (whatever guess(es) it makes). Within the loops are checks, if the computer's guess matches what the player put I want that value to be saved if not then the computer randomly chooses a different color and we continue on in this fashion for 10 turns or until the computer player guesses the entire code. The problem I'm running into is that if the computer's guess matches the player's that information isn't being carried on into the next turn. So if the computer guesses the first color as being purple and the first color is purple then the next turn the first guess should start with purple. Hopefully this makes sense. I suspect there is a much better way of doing this but I am a newbie. Here is a link to what I am doing.

http://codepen.io/terratunaz/pen/bNBoVY

var colorSelection; //the current selected color 
var clickCount = 0;
var playerCode = []; //holds player's code
var computerGuess = [];
var numColorValue = 0;
var computerSaveGuess = [];


//Fancy yet simple code to make the selectable colors respond to the user's actions   
$(document).ready(function() {

    $("div.codeOption").mouseenter(function() {

        $(this).animate({
            opacity: "0.1"
        }, "slow");
    });

    $("div.codeOption").mouseleave(function() {

        $(this).animate({
            opacity: "1"
        }, "fast");
    });


    //Have the player choose a 4 color code amongst the 6 possible choices on screen and store that information
    $("div.codeOption").click(function() {

        if (clickCount < 4) {


            colorSelection = $(this).attr("id");
            playerCode[clickCount] = colorSelection;
            clickCount++

        }

        if (playerCode.length === 4) {

            $("div.codeOption, #inGameInstructions").css("display", "none");

            $("#hackCode").css("display", "block");

            $("#playersFinalCode").append("<p id='furtherInstructions'>This is the code you have selected. Press the [HackCode] button to continue, or use the button at the top right corner to go back to the main menu to start over from the beginning.</p>");


            for (i = 0; i < playerCode.length; i++) {


                if (playerCode[i] === "red") {
                    $("#playersFinalCode").append("<div class= 'playerCodeChoice'><div class='" + playerCode[i] + "'></div></div");

                } else if (playerCode[i] === "green") {
                    $("#playersFinalCode").append("<div class= 'playerCodeChoice'><div class='" + playerCode[i] + "'></div></div");

                } else if (playerCode[i] === "orange") {
                    $("#playersFinalCode").append("<div class= 'playerCodeChoice'><div class='" + playerCode[i] + "'></div></div");

                } else if (playerCode[i] === "yellow") {
                    $("#playersFinalCode").append("<div class= 'playerCodeChoice'><div class='" + playerCode[i] + "'></div></div");

                } else if (playerCode[i] === "blue") {
                    $("#playersFinalCode").append("<div class= 'playerCodeChoice'><div class='" + playerCode[i] + "'></div></div>");

                } else {
                    $("#playersFinalCode").append("<div class= 'playerCodeChoice'><div class='" + playerCode[i] + "'></div></div>");

                }


            }

        }

        //   


        //

    });




    function HackCode() {
        $("#hackCode").click(function() {

            $("#hackCode").css("display", "none");
            $(".playerCodeChoice, #furtherInstructions").css("display", "none");

            //Computer logic for guessing
            var computerTurn = 10;

            while (computerTurn > 0)

            {

                /*
 for(i=0;i<playerCode.length; i++){


         if(playerCode[i].length===5){
       //red

     }

        else if(playerCode[i].length===5){
       //green

     }

     else if(playerCode[i].length ===4){
         //blue
     }

    else
      { if(playerCode[i].length ===6 && playerCode[i][0] === "o" ){
        //orange
      }

       else if(playerCode[i].length ===6 && playerCode[i][0] === "p" ){
        //purple
      }
        else{//yellow
        }
      }

  computerGuess.push(playerCode[i]);




}*/


                for (c = 0; c != 4; c++) {

                    for (i = 0; i != 4; i++) {



                        //if(computerGuess[c] === playerCode[i])
                        //      


                        // numColorValue = Math.floor((Math.random() * 6) + 1);

                        if (computerGuess[c] === playerCode[i]) {
                            computerGuess[c] = playerCode[i];
                        } else {
                            numColorValue = Math.floor((Math.random() * 6) + 1);

                            if (numColorValue === 1) {
                                computerGuess[c] = ("red");

                            } else if (numColorValue === 2) {
                                computerGuess[c] = ("green");

                            } else if (numColorValue === 3) {
                                computerGuess[c] = ("orange");

                            } else if (numColorValue === 4) {
                                computerGuess[c] = ("yellow");

                            } else if (numColorValue === 5) {
                                computerGuess[c] = ("blue");

                            } else {
                                computerGuess[c] = ("purple");

                            }
                        }

                    }

                }


                $("#guessList").append("<li class='list'>" + computerGuess + "</li>");
                computerTurn--;


            }

        });

    }

    HackCode();


    //Clears whatever is on the screen and displays the main menu when the player clicks on the button to go there
    function hideToMainMenu() {
        $("#toMainMenu").click(function() {
            $(".codeOption, #toMainMenu, #inGameInstructions,#helpMenuInstructions, #hackCode,.playerCodeChoice, #furtherInstructions, .list").css("display", "none");

            $("#mainTitle, #playGame, #helpMenu").css("display", "block");
            playerCode.length = 0;
            computerGuess.length = 0;
            clickCount = 0;
        });
    }

    hideToMainMenu();

    //Clears whatever is on the screen and displays the actual beginning of the game when the player clicks on the button to go there
    function playGame() {
        $("#playGame").click(function() {

            $("#mainTitle, #playGame, #helpMenu, #helpMenuInstructions").css("display", "none");

            $("#toMainMenu").css({
                "margin-top": "-5px",
                "float": "right"
            });
            $(".codeOption, #toMainMenu, #inGameInstructions").css("display", "block");


        });
    }

    playGame();

    //Clears whatever is on the screen and displays the main menu when the player clicks on the button to go there
    function hideHelpMenu() {
        $("#helpMenu").click(function() {
            $("#mainTitle,#helpMenu, #inGameInstructions").css("display", "none");


            $("#toMainMenu").css({
                "margin-top": "5px",
                "float": "none"
            });
            $("#helpMenuInstructions, #toMainMenu").css("display", "block");

        });

    }

    hideHelpMenu();


});

/

Answer 1

I feel like your logic needs some improvements. This game should only need one for-loop as you only need to check whether first matches first, second matches second etc. Your problem currently is that it goes and checks if the computer's selection matches all the player's choices, and would only get carried over if it matched the last one.

Also you could save the right guesses in another boolean array. Then at the beginning of the for-loop check if it has already been guessed.

If you do want that the computer can guess first = red, and match it with player's second = red,you should add a break; statement inside the loop to stop it.