无论顺序如何，都比较 JavaScript 中的两个字符串？

Question

I'm trying to make a jumbled word game and I'm having trouble finding a way to compare the inputted guess with the answer.

Here's what I've tried so far:

 var answer = document.getElementById("attempt").value; function guess() { var word = ["dog", "cat"]; var randomize = word[Math.floor(Math.random() * word.length)]; var shuffled = []; for (var i = 0; i < randomize.length; i++) { shuffled.push(randomize[i]); } shuffled.sort(function() { return 0.5 - Math.random(); }); scrambledWord.innerHTML = shuffled.join(""); var sortedShuffled = shuffled.split('').sort(); var sortedAnswer = answer.split("").sort(); if (sortedShuffled.includes(sortedAnswer)) { display.innerHTML = "Correct"; } }

 <div id="scrambledWord"></div> <input type="text" id="attempt"> <button onclick="guess()">Guess</button> <br> <div id="display"></div>

I also tried it with

if (sortedShuffle == sortedAnswer) {

But no dice.

Please help? I'm not smart.

A link to a JSFiddle https://jsfiddle.net/ohkm1vn7/

Answer 1

Solution with some refactoring.

 const answerInput = document.getElementById("attempt"); function guess() { const answer = answerInput.value; const word = ["dog", "cat"]; const randomize = word[Math.floor(Math.random() * word.length)]; const shuffled = []; for (let i = 0; i < randomize.length; i++) { shuffled.push(randomize[i]); } shuffled.sort(function() { return 0.5 - Math.random(); }); scrambledWord.innerHTML = shuffled.join(""); const sortedShuffled = shuffled.sort().join(""); const sortedAnswer = answer.toLowerCase().split("").sort().join(""); display.textContent = (sortedShuffled === sortedAnswer)? "Correct": "Fail" }

 <div id="scrambledWord"></div> <input type="text" id="attempt"> <button onclick="guess()">Guess</button> <br> <div id="display"></div>

Answer 2

You save the value of the field when the page loads ( var answer =... ), and never check it again. You need to get that value when checking that it's correct.

Also, I'm guessing you want the scrambled word to be displayed before the user clicks on the button? Then, you need to do that before, and not in the guess function.

Here is a way:

 var $ = document.querySelector.bind(document), $scrambledWord = $("#scrambledWord"), $attempt = $("#attempt"), $display = $("#display"), words = ["snake", "turtle"], correct = null; $("#new-game-btn").addEventListener('click', resetGame); $("#guess-btn").addEventListener('click', guess); resetGame(); // Do it on page load function resetGame() { // Choose a random word correct = words[ Math.floor(Math.random() * words.length) ]; // Display the scrambled word $scrambledWord.innerHTML = scrambleWord(correct); // Reset the field and focus it $attempt.value = ''; $attempt.focus(); // Reset the display $display.innerHTML = 'Will you guess what it is?'; } function scrambleWord(word) { return word.split('').sort(() => 0.5 - Math.random()).join(''); } function guess() { var answer = $attempt.value; $display.innerHTML = answer === correct? 'Correct': 'Nope'; }

 <button id="new-game-btn">New game</button> <div id="scrambledWord"></div> <input id="attempt"> <button id="guess-btn">Guess</button> <div id="display"></div>