Javascript function only executes every other time
Question
I'm working on a letter guessing game and I have a scoreboard at the bottom that shows how many lives the player has left before they lose the game. I have an onscreen keyboard that the user clicks to choose which letter they want to guess.
Everything works fine, except for removing the player's 'lives'. I have the lives as images that are in an ordered list. On each button click, a function checks to see if that button press matches a letter in the phrase. If it doesn't, it needs to remove a life from the ordered list, and add 1 to the missed count.
Adding 1 to the missed counts works on every wrong button press, but removing the heart only works on every other one, and I'm not sure why. Any help would be greatly appreciated.
function checkLetter(clickedButton) { const letters = document.getElementsByClassName('letter'); let letterFound = null; for (let i = 0; i < letters.length; i += 1) { if (clickedButton === letters[i].textContent) { letters[i].classList.add('show'); letterFound = true; } } return letterFound; } function changeScore() { let scoreboardList = document.querySelector('ol'); scoreboardList.removeChild(scoreboardList.childNodes[0]); } qwerty.addEventListener('click', (e) => { const button = e.target; const buttonText = button.textContent; checkLetter(buttonText); if (checkLetter(buttonText) == null) { missed += 1; changeScore(); console.log(missed); } else { button.classList.add('chosen'); } });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Wheel of Success!</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/styles.css" rel="stylesheet"> </head> <body> <div class="main-container"> <div id="overlay" class="start"> <h2 class="title">Wheel of Success</h2> <a class="btn__reset">Start Game</a> </div> <div id="banner" class="section"> <h2 class="header">Wheel of Success</h2> </div> <div id="phrase" class="section"> <ul></ul> </div> <div id="qwerty" class="section"> <div class="keyrow"> <button>q</button><button>w</button><button>e</button><button>r</button><button>t</button><button>y</button><button>u</button><button>i</button><button>o</button><button>p</button> </div> <div class="keyrow"> <button>a</button><button>s</button><button>d</button><button>f</button><button>g</button><button>h</button><button>j</button><button>k</button><button>l</button> </div> <div class="keyrow"> <button>z</button><button>x</button><button>c</button><button>v</button><button>b</button><button>n</button><button>m</button> </div> </div> <div id="scoreboard" class="section"> <ol> <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li> <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li> <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li> <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li> <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li> </ol> </div> </div> <script type="text/javascript" src="js/app.js"></script> </body> </html>
2 answers
solution1
1 ACCPTED 2019-03-16 21:49:47
From what I can tell, your call to scoreboardList.removeChild(scoreboardList.childNodes[0]); will remove the first node. In your case, this is not necessarily an element, but can also be a text node containing only white space. This is probably the reason, why only every second call looks like it is doing something. The other one is removing white space. I have changed the code to explicitly remove the first "heart" node instead. And, of course, what Lewis mentioned in his comment: Don't call checkLetter twice. Just use it in the if directly.
let missed = 0; function changeScore() { let scoreboardList = document.querySelector('ol'); // !!!!!! These two lines are the important changes: let heart = scoreboardList.querySelector('li:first-child'); // find first heart item scoreboardList.removeChild(heart); // remove the heart } document.addEventListener('click', (e) => { //const button = e.target; //const buttonText = button.textContent; //if (checkLetter(buttonText) == null) { missed += 1; changeScore(); console.log(missed); //} else { // button.classList.add('chosen'); //} });
<div id="scoreboard" class="section"> <ol> <li class="tries"><img src="http://pngimg.com/uploads/heart/heart_PNG51341.png" height="35px" width="30px"></li> <li class="tries"><img src="http://pngimg.com/uploads/heart/heart_PNG51341.png" height="35px" width="30px"></li> <li class="tries"><img src="http://pngimg.com/uploads/heart/heart_PNG51341.png" height="35px" width="30px"></li> <li class="tries"><img src="http://pngimg.com/uploads/heart/heart_PNG51341.png" height="35px" width="30px"></li> <li class="tries"><img src="http://pngimg.com/uploads/heart/heart_PNG51341.png" height="35px" width="30px"></li> </ol> </div>
solution2
0 2019-03-16 21:54:19
Just update your changeScore() method like this:
function changeScore() {
let scoreboardList = document.querySelector('ol');
// Replace this
// scoreboardList.removeChild(scoreboardList.childNodes[0]);
// By this 'EDIT'
scoreboardList.removeChild(scoreboardList.querySelector('li:first-child'));
}
That will remove a heart each time the answer is false.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.