web: Problems with Hangman in Javascript

samedi 21 août 2021

Problems with Hangman in Javascript

var words = ['NISSAN', 'LAMBORGHINI', 'AUDI', 'TOYOTA', 'BMW', 'MERCEDES', 'HONDA', 'HYUNDAI', 'VOLKSWAGEN', 'PORSCHE'];
var score = 0;
var fails = 0;
var displayedWord = [];
str2 = "";
usedLetters = "";


var randomItem = words[Math.floor(Math.random()*words.length)];

function startBtn(ScorePastGame) {
document.getElementById("startmessage").value = "";
var inputs = document.getElementsByClassName('enableLetters');
for(var i = 0; i < inputs.length; i++) {
inputs[i].disabled = false;
}
    randomItem = words[Math.floor(Math.random()*words.length)];
    var i = 0;
    newWord = "";

    for (var i = 0; i< randomItem.length; i++) {
        newWord += "#";
    }

    var fails = 0;
    console.log(randomItem);
    document.getElementById("fail").value = fails;
    document.getElementById("hangman").value = newWord;

    if (ScorePastGame && ScorePastGame !=0)
    {
        score = ScorePastGame;
    }
    else
    {
        score = 0;
    }
    fails = 0;
}

function clickButton(letter) {
    var txtRandomword = document.getElementById("hangman").value;
    var WrongLetters = document.getElementById("startmessage").value;
    var liveNum = document.getElementById("fail").value;
    var Fail = true;

    if (randomItem.includes(letter))
    {
        for (var k = 0; k < randomItem.length; k++)
        {
            if(randomItem.charAt(k) == letter)
            {
                newWord = newWord.substr(0,k) + letter + newWord.substr(k + 1);
            }

        }
        document.getElementById("hangman").value = newWord;

        if (!newWord.includes("#"))
        {
    alert("You win!");
    fails = 0;
            score++;
            document.getElementById("score").value = score;
            startBtn(score);
        }

    }
    else
    {
        fails++;
        document.getElementById("fail").value = fails;

        if (fails > 6) {
    alert("You lose!");
    fails = 0;
    usedLetters = "";
            startBtn();
        }
    }
    usedLetters += letter + " ";
    document.getElementById("startmessage").value = usedLetters;
}

table{
  background-color: thistle;
  margin: 0px auto;
  margin-top: 13%;
}
.enableLetters,
#score,
#fail,
#hangman,
#startmessage:disabled {
  background: white;
  color: black;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
  </head>
  <body>
    <form>
      <table border="1">
        <tr>
          <td colspan="4" style="text-align: right">
            <label for="score">Score: </label>
            <input type="text" id="score" name="score" value="0" size="2" checked="valid()" disabled/><br>
            <label for="fail">Fails (6): </label>
            <input type="text" id="fail" name="fail" value="0" size="2" disabled/>
          </td>
          <td colspan="7" style="text-align: center">
            <label for="hangman"></label>
            <input type="text" id="hangman" name="hangman" value="   ---Hangman---   " disabled/><br>
            <label for="startmessage"></label>
            <input type="text" id="startmessage" name="startmessage" value="Click Start to get a word." disabled/>
          </td>
          <td colspan="2" style="text-align: center">
            <label for="start"></label>
            <input type="button" id="start" name="start" value="Start" onclick="startBtn()"/>
          </td>
        </tr>
        <tr>
          <td style="text-align: center"><input type="button" class="enableLetters" value="A" onClick="clickButton('A')" disabled/></td>
          <td style="text-align: center"><input type="button" class="enableLetters" value="B" onClick="clickButton('B')" disabled/></td>
          <td style="text-align: center"><input type="button" class="enableLetters" value="C" onClick="clickButton('C')" disabled/></td>
          <td style="text-align: center"><input type="button" class="enableLetters" value="D" onClick="clickButton('D')" disabled/></td>
          <td style="text-align: center"><input type="button" class="enableLetters" value="E" onClick="clickButton('E')" disabled/></td>
          <td style="text-align: center"><input type="button" class="enableLetters" value="F" onClick="clickButton('F')" disabled/></td>
          <td style="text-align: center"><input type="button" class="enableLetters" value="G" onClick="clickButton('G')" disabled/></td>
          <td style="text-align: center"><input type="button" class="enableLetters" value="H" onClick="clickButton('H')" disabled/></td>
          <td style="text-align: center"><input type="button" class="enableLetters" value="I" onClick="clickButton('I')" disabled/></td>
          <td style="text-align: center"><input type="button" class="enableLetters" value="J" onClick="clickButton('J')" disabled/></td>
          <td style="text-align: center"><input type="button" class="enableLetters" value="K" onClick="clickButton('K')" disabled/></td>
          <td style="text-align: center"><input type="button" class="enableLetters" value="L" onClick="clickButton('L')" disabled/></td>
          <td style="text-align: center"><input type="button" class="enableLetters" value="M" onClick="clickButton('M')" disabled/></td>
        </tr>
        <tr>
          <td style="text-align: center"><input type="button" class="enableLetters" value="N" onClick="clickButton('N')" disabled/></td>
                <td style="text-align: center"><input type="button" class="enableLetters" value="O" onClick="clickButton('O')" disabled/></td>
                <td style="text-align: center"><input type="button" class="enableLetters" value="P" onClick="clickButton('P')" disabled/></td>
                <td style="text-align: center"><input type="button" class="enableLetters" value="Q" onClick="clickButton('Q')" disabled/></td>
                <td style="text-align: center"><input type="button" class="enableLetters" value="R" onClick="clickButton('R')" disabled/></td>
                <td style="text-align: center"><input type="button" class="enableLetters" value="S" onClick="clickButton('S')" disabled/></td>
                <td style="text-align: center"><input type="button" class="enableLetters" value="T" onClick="clickButton('T')" disabled/></td>
                <td style="text-align: center"><input type="button" class="enableLetters" value="U" onClick="clickButton('U')" disabled/></td>
                <td style="text-align: center"><input type="button" class="enableLetters" value="V" onClick="clickButton('V')" disabled/></td>
                <td style="text-align: center"><input type="button" class="enableLetters" value="W" onClick="clickButton('W')" disabled/></td>
                <td style="text-align: center"><input type="button" class="enableLetters" value="X" onClick="clickButton('X')" disabled/></td>
                <td style="text-align: center"><input type="button" class="enableLetters" value="Y" onClick="clickButton('Y')" disabled/></td>
                <td style="text-align: center"><input type="button" class="enableLetters" value="Z" onClick="clickButton('Z')" disabled/></td>
        </tr>
      </table>
    </form>
  </body>
</html>

I'm writing a Hangman game using HTML, CSS and JavaScript. After searching through the net high and low I'm still unable to figure out how to solve the problem I'm facing. So how the Hangman game works is that the user will click on the letter and the letters they clicked will be shown on the box above. My problem now is that I can't stop the same letter from appearing on the box and that affects the number of fails.