I just learn the language. Tell me how to implement correctly so that when guessing a letter (when typing from the keyboard) in the word, guessing began with the first letter and, if correctly entered, moved on to the next one. In all similar examples (on the Internet I searched), letters are entered where they find the correct letter. And I need to start with the first.
At least tell me where to look.
Thank.
Here is the script code:
const word = ['wrinkles','wrinkle it','wrink it lost']; var randNum = Math.floor(Math.random() * word.length); var choosenWord = word[randNum]; var underScore = []; var rightWord = []; var wrongWord = []; var docUnderScore = document.getElementsByClassName("underscores"); var generateUnderscore = () => { for(var i = 0; i < choosenWord.length; i++) { if(choosenWord[i] === ' '){ underScore.push( ' ' ); } else { underScore.push( '_' ); } } return underScore; } document.addEventListener('keypress', (event) => { var keyword = String.fromCharCode(event.keyCode); if(choosenWord.indexOf(keyword) > -1) { rightWord.push(keyword); underScore[choosenWord.indexOf(keyword)] = keyword; docUnderScore[0].innerHTML = underScore.join(''); console.log(underScore[choosenWord.indexOf(keyword)] = keyword); } else { wrongWord.push(keyword); } }); docUnderScore[0].innerHTML = generateUnderscore().join(''); HTML
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0"> <title>Words</title> </head> <style> html, body { height: 100%; } body{ /*font-size: 2em;*/ font-family: 'Arial', sans-serif; color: #666666; padding-top: 120px; text-align: center; } h1,h2,h3 { margin: auto; } p{ margin: 0 0; color: #666666; } .container { text-align: center; margin: 0 auto; max-width: 1300px; } .block, .block-button { padding: 20px 0; width: 250px; margin: inherit; } </style> <body> <h1>Guess</h1> <div class="container"> <div class="block"> <h2> <span class="underscores"></span> </h2> </div> </div> </body> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/script.js"></script> </html> 