For loop not stopping at each iteration

Question

I am a beginner to JavaScript, writing a hangman-type game where a user enters a string answer, then enters one character at a time to try and guess the answer. (I'm changing it later to use an array of set answers instead of a user entered one, this way is just for testing). However, when I try to loop through my answer array and compare it to the input character in the function answerFunction(), it sets my whole blank array the same as the answer array instead of one character at a time as I want.

<html>

<head>
    <script src="hangman.js"></script>
</head>

<body>
    <h2>Hangman Game</h2>
    <p>Game Description</p>
    <input id="userinput" placeholder="Input Answer"></input>
    <button value='send' id="submit" onclick="userInput()">Submit</button><br><br>
    <input id="userguess" placeholder="Input Guess"></input>
    <button value='send' id="submit" onclick="userGuess()">Submit</button>
    <p id="answer-placeholder"></p>
    <p id="guess-placeholder"></p>
</body>

</html>

function userInput() {
    inputAnswer = document.getElementById("userinput").value;
    answerArray = inputAnswer.split("");
    blankArray = answerArray.slice(0);
    blankArray.fill("_ ");
    document.getElementById("answer-placeholder").innerText = blankArray;
}

function userGuess() {
    inputChar = document.getElementById("userguess").value;
    answerLoop();
}

function answerLoop() {
    for (var i = 0; i < answerArray.length; i++) {
        if (inputChar = answerArray[i]) {
            blankArray[i] = answerArray[i];
            document.getElementById("guess-placeholder").innerText = blankArray;
        } else {
            break;
        }
    }
}

Example: Answer is John I type in J, and it displays J,o,h,n instead of the expected J,,,_

You're using an assignment operator `=` instead of equality operator `==` in your `if` condition so it's never false. — Marty, Jul 22 '19 at 00:02
`` is a member of the void elements family and does not needs a closing `` tag. — Roko C. Buljan, Jul 22 '19 at 00:05
use continue instead of break resource: https://www.w3schools.com/js/js_break.asp — o elhajoui, Jul 22 '19 at 00:07
And why don't you make it immediately using multiple guess inputs for the length of the answer? — Roko C. Buljan, Jul 22 '19 at 00:07
Try not to use w3schools as an authoritative resource for your knowledge. @oelhajoui — Roko C. Buljan, Jul 22 '19 at 00:08
@RokoC.Buljan Im making a game thats similar to hangman, where you only guess one letter at a time — SterlingH, Jul 22 '19 at 00:10

Oloff Biermann · Answer 1 · 2019-07-22T04:03:18.907

There are two issues. Like, Marty said, you are trying to compare two values in your if statement. You need to use == instead of =. When you use = in an if statement, the assignment operation will be performed instead of comparison. This is an easy mistake to make because JavaScript won't give you any kind of warning. It will simply evaluate the value that you assigned as true or false.

So what happens here? The value at answerArray[i] is assigned to inputChar. This will be a string containing 1 character. This value is then be evaluated. The confusing thing is that JavaScript evaluates any string as true. These types of values are called a "truthy" value. So the code inside the if statement will actually be executed every time the for loop executes. That's definitely not what you want.

The other problem is that you are using break in the else block. You don't want to do that because it breaks the loop early if there is no match the first time the loop is executed. In other words, on the first iteration. But remember that the user's guess might match the 2nd, 3rd, 4th, etc. letter. So basically get rid of the break as well.

So the JS will look like this:

function userInput() {
    inputAnswer = document.getElementById("userinput").value;
    answerArray = inputAnswer.split("");
    blankArray = answerArray.slice(0);
    blankArray.fill("_ ");
    document.getElementById("answer-placeholder").innerText = blankArray;
  console.log(answerArray);
  console.log(blankArray);
}

function userGuess() {
    inputChar = document.getElementById("userguess").value;
    answerLoop();
}

function answerLoop() {
    for (var i = 0; i < answerArray.length; i++) {
        if (inputChar == answerArray[i]) {
            blankArray[i] = answerArray[i];
            document.getElementById("guess-placeholder").innerText = blankArray;

        } 
    }
}

That being said, you should also look into using the === operator instead of ==. This can help you avoid some annoying bugs in the future. In a nutshell, == will attempt to do type conversion for you. This means that it will return true in many cases where the two things you are comparing (the operands) are not of the same type. This answer gives a good summary of the differences between them: Which equals operator (== vs ===) should be used in JavaScript comparisons?

Also, here is some more info about break https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/break

score -3 · Answer 2 · edited Jul 22 '19 at 19:45

-3

Use continue instead of break

break, stops the loop, continue well the name says it. It continues the loop.

You can see a reference here. https://www.w3schools.com/js/js_break.asp

Tbh You don't need even continue just dont use an else.

edited Jul 22 '19 at 19:45

marc_s

732,580
175
1,330
1,459

answered Jul 22 '19 at 00:10

o elhajoui

394
4
14

The OP wants to stop the loop. – Marty Jul 22 '19 at 00:11
Well, in the comment he said something different. He said it fixed his problem so i added it as an answer. He wants the loop to stop at every itteration. I think his explantion was off. – o elhajoui Jul 22 '19 at 00:12

For loop not stopping at each iteration

2 Answers2