子手游戏-替换列表中的字母

Question

As part of my assignment I'm making a simple hangman game where the user click on an alphabet of letters, which then is supposed to swap the correct letters otherwise shown as _.

I know the problem is myWord[i].innerHTML = guess; and why, but I don't know what else to use here.

If you don't want to look through the entire snippet, the function that's supposed to take care of it is below:

function wordOnClick() {

    var guess = this.innerHTML; //Usikker
    this.className = "active";
    this.onclick = null;
    for (var i=0; i<saveWord.length; i++) {
        if (saveWord[i] === guess) {

            myWord[i].innerHTML = guess;

            var bool = true;
            winCounter++;

        }
    }
    if (bool != true) {
        counter --;
        animateMan();

    }
    if (counter === 0) {
        document.getElementById("buttons").className = "active";

    }
    if (winCounter === saveWord.length) {
        lifePool.innerHTML = "Congratz, you've won!";
        hangmanbtn.style.display = "inherit";

    }
}

Entire code here:

 hangmanbtn.onclick = function() { hangman(); }; /* * Hangman! * Runs when you click PLAY! */ function hangman() { hangmanStyle(); createbuttons(); incompleteWord(); /* * RESET CANVAS ON NEW GAME */ var canvas = document.getElementById("hangman"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.clearRect(0, 0, canvas.width, canvas.height); /* * REMOVE CAVNAS OVERLAY & RESTORE BUTTONS */ hangmanbtn.style.display = "none"; hiddenCanvas.style.display = "none"; lifePool.innerHTML = "You have 6 lives"; document.getElementById("buttons").className = ""; /* * VARIABLES */ var saveWord; var words = []; var guess; var usedGuesses = []; var getWord; var myWord = document.getElementById("myWord").innerHTML; var counter = 6; var winCounter = 0; /* * This function creates the alphabet buttons */ function createbuttons() { document.getElementById("buttons").innerHTML = ""; var sexyButtons = document.getElementById("buttons"); var letters = document.createElement("ul"); var alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z' ]; for (var i = 0; i < alphabet.length; i++) { letters.id = "alphabet"; var list = document.createElement("li"); list.id = "letter"; list.innerHTML = alphabet[i]; list.onclick = wordOnClick; sexyButtons.appendChild(letters); letters.appendChild(list); } } /* * Finds a random word and returns it */ function chosenWord() { words = ["keyboard", "guitar", "elephant", "radio", "amnesia", "law", "programming", "princess", "facebook", "pizza", "taco", "electronics", "titanic", "elevator", "cat", "house", "sea", "space", "galaxy", "psychopath", "marijuana", "youcanneverguessthiswordhahah" ]; var result = Math.floor(Math.random() * words.length); saveWord = words[result]; console.log(saveWord); return saveWord; } /* * Gets word from chosenWord() and displays the word in a list */ function incompleteWord() { var wordHolder = document.getElementById("hold"); var makeWordList = document.createElement("ul"); var getWord = chosenWord(); guess; usedGuesses = []; hold.innerHTML = ""; for (var i = 0; i < getWord.length; i++) { makeWordList.id = "myWord"; guess = document.createElement("li"); guess.className = "guess"; guess.innerHTML = "_"; wordOnClick(); usedGuesses.push(guess); wordHolder.appendChild(makeWordList); makeWordList.appendChild(guess); } return getWord; return usedGuesses; } /* * Runs when you click a letter: * Replaces _ with the correct letter, draws the hangman if it is wrong, whites out * the already clicked letters, and gives feedback on remaining lives */ function wordOnClick() { var guess = this.innerHTML; //Usikker this.className = "active"; this.onclick = null; for (var i = 0; i < saveWord.length; i++) { if (saveWord[i] === guess) { myWord[i].innerHTML = guess; var bool = true; winCounter++; } } if (bool != true) { counter--; animateMan(); } if (counter === 0) { document.getElementById("buttons").className = "active"; } if (winCounter === saveWord.length) { lifePool.innerHTML = "Congratz, you've won!"; hangmanbtn.style.display = "inherit"; } } /* * This function sets the width and color for the hangman */ function hangmanStyle() { var ctx = document.getElementById("hangman").getContext("2d"); ctx.beginPath(); ctx.strokeStyle = "#000" ctx.lineWidth = 4; } /* * This function draws the hangman pieces in order */ function animateMan() { var remLives = counter; for (var i = -1; i < remLives; i++) { if (remLives === 5) { head(); lifePool.innerHTML = "You have " + remLives + " lives"; } else if (remLives === 4) { body(); lifePool.innerHTML = "You have " + remLives + " lives"; } else if (remLives === 3) { leftArm(); lifePool.innerHTML = "You have " + remLives + " lives"; } else if (remLives === 2) { rightArm(); lifePool.innerHTML = "You have " + remLives + " lives"; } else if (remLives === 1) { leftLeg(); lifePool.innerHTML = "You have " + remLives + " lives"; } else if (remLives === 0) { rightLeg(); lifePool.innerHTML = "You have lost!"; hangmanbtn.style.display = "inherit"; } } } /* * These are the hangman limbs */ function head() { var ctx = document.getElementById("hangman").getContext("2d"); ctx.beginPath(); ctx.fillStyle = "#000" ctx.arc(235, 145, 25, 0, 2 * Math.PI) ctx.fill(); ctx.stroke(); } function body() { var ctx = document.getElementById("hangman").getContext("2d"); ctx.beginPath(); ctx.moveTo(235, 170); ctx.lineTo(235, 250); ctx.stroke(); } function leftArm() { var ctx = document.getElementById("hangman").getContext("2d"); ctx.beginPath(); ctx.moveTo(235, 180); ctx.lineTo(200, 200); ctx.stroke(); } function rightArm() { var ctx = document.getElementById("hangman").getContext("2d"); ctx.beginPath(); ctx.moveTo(235, 180); ctx.lineTo(270, 200); ctx.stroke(); } function leftLeg() { var ctx = document.getElementById("hangman").getContext("2d"); ctx.beginPath(); ctx.moveTo(235, 250); ctx.lineTo(200, 290); ctx.stroke(); } function rightLeg() { var ctx = document.getElementById("hangman").getContext("2d"); ctx.beginPath(); ctx.moveTo(235, 250); ctx.lineTo(270, 290); ctx.stroke(); } } 

 body { background-color: antiquewhite; } .task { margin: 5px; padding: 3px; border-top: 2px solid gray; } #hangman { /*background-image: url("hangman/hangmanbackground.jpg");*/ background-color: #FFF; } #alphabet { padding: 2px; padding-top: 5px; padding-bottom: 5px; padding-left: 8px; width: 380px; height: 80px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -khtml-border-radius: 5px; border: solid 1px #fff; background-color: forestgreen; } #alphabet li { float: left; margin: 0 5px 13px 0; list-style: none; width: 12px; height: 10px; padding: 5px; padding-bottom: 15px; background: #c1d72e; color: #fff; cursor: pointer; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -khtml-border-radius: 5px; border: solid 1px #fff; } #alphabet li:hover { background: #3ADF00; border: solid 1px #fff; color: #fff; } .active { opacity: 0.4; filter: alpha(opacity=40); -moz-transition: all 1s ease-in; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; cursor: default; } .active:hover { -moz-transition: all 1s ease-in; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; opacity: 0.4; filter: alpha(opacity=40); -moz-transition: all 1s ease-in; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } #myWord { margin: 0; display: block; padding: 0; display: block; } #myWord li { position: relative; list-style: none; margin: 0; display: inline-block; padding: 0 10px; font-size: 30px; } #lifePool { max-width: 300px; margin: 0; z-index: 3px; font-size: 30px; font-family: monospace; color: #c1d72e; } #hiddenCanvas { height: 500px; width: 800px; position: absolute; z-index: 4; background-color: forestgreen; opacity: 0.8; } #hangmanbtn { width: 100px; height: 50px; background-color: #c1d72e; border-radius: 10px; color: #fff; font-size: 25px; } 

 <section class="task"> <h3> Task 4 </h3> <button id=hangmanbtn>Play!</button> <div id="hiddenCanvas"></div> <p id="lifePool"></p> <div id="buttons"></div> <div id="hold"></div> <canvas id="hangman" height="500px" width="800px"></canvas> </section> 

Answer 1

Your mistake was that you have always reset the variables to their default value. Please a correct way:

 hangmanbtn.onclick = function() { hangman(); }; /* * Hangman! * Runs when you click PLAY! */ function hangman() { hangmanStyle(); createbuttons(); incompleteWord(); /* * RESET CANVAS ON NEW GAME */ var canvas = document.getElementById("hangman"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.clearRect(0, 0, canvas.width, canvas.height); /* * REMOVE CAVNAS OVERLAY & RESTORE BUTTONS */ hangmanbtn.style.display = "none"; hiddenCanvas.style.display = "none"; lifePool.innerHTML = "You have 6 lives"; document.getElementById("buttons").className = ""; /* * VARIABLES */ var saveWord; var words = []; var guess; var getWord; var myWord = document.getElementById("myWord").innerHTML; var counter = 6; var winCounter = 0; /* * This function creates the alphabet buttons */ function createbuttons() { document.getElementById("buttons").innerHTML = ""; var sexyButtons = document.getElementById("buttons"); var letters = document.createElement("ul"); var alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z' ]; for (var i = 0; i < alphabet.length; i++) { letters.id = "alphabet"; var list = document.createElement("li"); list.id = "letter"; list.innerHTML = alphabet[i]; list.onclick = wordOnClick; sexyButtons.appendChild(letters); letters.appendChild(list); } } /* * Finds a random word and returns it */ function chosenWord() { words = ["keyboard", "guitar", "elephant", "radio", "amnesia", "law", "programming", "princess", "facebook", "pizza", "taco", "electronics", "titanic", "elevator", "cat", "house", "sea", "space", "galaxy", "psychopath", "marijuana", "youcanneverguessthiswordhahah" ]; var result = Math.floor(Math.random() * words.length); saveWord = words[result]; console.log(saveWord); return saveWord; } /* * Gets word from chosenWord() and displays the word in a list */ function incompleteWord() { var wordHolder = document.getElementById("hold"); var makeWordList = document.createElement("ul"); var getWord = chosenWord(); guess; usedGuesses = []; hold.innerHTML = ""; for (var i = 0; i < getWord.length; i++) { makeWordList.id = "myWord"; guess = document.createElement("li"); guess.className = "guess"; guess.innerHTML = "_"; wordOnClick(); usedGuesses.push(guess); wordHolder.appendChild(makeWordList); makeWordList.appendChild(guess); } return getWord; return usedGuesses; } /* * Runs when you click a letter: * Replaces _ with the correct letter, draws the hangman if it is wrong, whites out * the already clicked letters, and gives feedback on remaining lives */ function wordOnClick() { var guess = this.innerHTML; //Usikker this.className = "active"; this.onclick = null; for (var i = 0; i < saveWord.length; i++) { if (saveWord[i] === guess) { usedGuesses[i].innerHTML = guess; var bool = true; winCounter++; } } if (bool != true) { counter--; animateMan(); } if (counter === 0) { document.getElementById("buttons").className = "active"; } if (winCounter === saveWord.length) { lifePool.innerHTML = "Congratz, you've won!"; hangmanbtn.style.display = "inherit"; } } /* * This function sets the width and color for the hangman */ function hangmanStyle() { var ctx = document.getElementById("hangman").getContext("2d"); ctx.beginPath(); ctx.strokeStyle = "#000" ctx.lineWidth = 4; } /* * This function draws the hangman pieces in order */ function animateMan() { var remLives = counter; for (var i = -1; i < remLives; i++) { if (remLives === 5) { head(); lifePool.innerHTML = "You have " + remLives + " lives"; } else if (remLives === 4) { body(); lifePool.innerHTML = "You have " + remLives + " lives"; } else if (remLives === 3) { leftArm(); lifePool.innerHTML = "You have " + remLives + " lives"; } else if (remLives === 2) { rightArm(); lifePool.innerHTML = "You have " + remLives + " lives"; } else if (remLives === 1) { leftLeg(); lifePool.innerHTML = "You have " + remLives + " lives"; } else if (remLives === 0) { rightLeg(); lifePool.innerHTML = "You have lost!"; hangmanbtn.style.display = "inherit"; } } } /* * These are the hangman limbs */ function head() { var ctx = document.getElementById("hangman").getContext("2d"); ctx.beginPath(); ctx.fillStyle = "#000" ctx.arc(235, 145, 25, 0, 2 * Math.PI) ctx.fill(); ctx.stroke(); } function body() { var ctx = document.getElementById("hangman").getContext("2d"); ctx.beginPath(); ctx.moveTo(235, 170); ctx.lineTo(235, 250); ctx.stroke(); } function leftArm() { var ctx = document.getElementById("hangman").getContext("2d"); ctx.beginPath(); ctx.moveTo(235, 180); ctx.lineTo(200, 200); ctx.stroke(); } function rightArm() { var ctx = document.getElementById("hangman").getContext("2d"); ctx.beginPath(); ctx.moveTo(235, 180); ctx.lineTo(270, 200); ctx.stroke(); } function leftLeg() { var ctx = document.getElementById("hangman").getContext("2d"); ctx.beginPath(); ctx.moveTo(235, 250); ctx.lineTo(200, 290); ctx.stroke(); } function rightLeg() { var ctx = document.getElementById("hangman").getContext("2d"); ctx.beginPath(); ctx.moveTo(235, 250); ctx.lineTo(270, 290); ctx.stroke(); } } 

 body { background-color: antiquewhite; } .task { margin: 5px; padding: 3px; border-top: 2px solid gray; } #hangman { /*background-image: url("hangman/hangmanbackground.jpg");*/ background-color: #FFF; } #alphabet { padding: 2px; padding-top: 5px; padding-bottom: 5px; padding-left: 8px; width: 380px; height: 80px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -khtml-border-radius: 5px; border: solid 1px #fff; background-color: forestgreen; } #alphabet li { float: left; margin: 0 5px 13px 0; list-style: none; width: 12px; height: 10px; padding: 5px; padding-bottom: 15px; background: #c1d72e; color: #fff; cursor: pointer; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -khtml-border-radius: 5px; border: solid 1px #fff; } #alphabet li:hover { background: #3ADF00; border: solid 1px #fff; color: #fff; } .active { opacity: 0.4; filter: alpha(opacity=40); -moz-transition: all 1s ease-in; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; cursor: default; } .active:hover { -moz-transition: all 1s ease-in; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; opacity: 0.4; filter: alpha(opacity=40); -moz-transition: all 1s ease-in; -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } #myWord { margin: 0; display: block; padding: 0; display: block; } #myWord li { position: relative; list-style: none; margin: 0; display: inline-block; padding: 0 10px; font-size: 30px; } #lifePool { max-width: 300px; margin: 0; z-index: 3px; font-size: 30px; font-family: monospace; color: #c1d72e; } #hiddenCanvas { height: 500px; width: 800px; position: absolute; z-index: 4; background-color: forestgreen; opacity: 0.8; } #hangmanbtn { width: 100px; height: 50px; background-color: #c1d72e; border-radius: 10px; color: #fff; font-size: 25px; } 

 <section class="task"> <h3> Task 4 </h3> <button id=hangmanbtn>Play!</button> <div id="hiddenCanvas"></div> <p id="lifePool"></p> <div id="buttons"></div> <div id="hold"></div> <canvas id="hangman" height="500px" width="800px"></canvas> </section> 

Answer 2

On line 40 of the .js file, you are assigning innerHTML of ul with id myWord to the variable myWord . What you should rather do is assign child nodes of the ul like this:

    var myWord = document.getElementById("myWord").childNodes; //no innerHTML

Also, I recommend get rid of unreachable return statement return usedGuesses at line 110 . Hope that helps.

Answer 3

I think I found the problem. The problem at logic. myWord is a string variable not an array. you defined it here var myWord = document.getElementById("myWord").innerHTML; .

Now guess is also a string, and saveWord so.

As you comparing each character in saveWord with each in guess here if (saveWord[i] === guess) and storing in myWord , you have to do, if (saveWord[i] === guess[i]) and myWord[i]= guess[i];

so my assumed solution would be:

for (var i=0; i<saveWord.length; i++) {
        if (saveWord[i] === guess[i]) {

            myWord[i] = guess[i];

            var bool = true;
            winCounter++;

        }