word does not display in Chrome until you end the shuffle-CodePudding

In this program below, the variable word does not display in any browser every time you shuffle.

let word = prompt("Enter a word:");

while (true) {
    let scramble = scrambleWord(word);
    displayWord(scramble);

    let again = prompt("Scramble again? (y/n)");
    if (again === "n") {
        break;
    }
}

function scrambleWord(word) {
    word = word.split("").sort(() => Math.random() - 0.5).join("");
    return word;
}

function displayWord(scramble) {
    let displayArea = document.getElementById("display-area");
    displayArea.innerHTML = scramble;
}

<!DOCTYPE html>
<html>
<body>
  <div id="display-area"></div>
</body>
</html>

Any ideas what is wrong with it?

Regards, Lee

the word should appear each time it's shuffled.

CodePudding user response：

The problem is that the prompt() method blocks the JavaScript execution and does not allow the webpage to update and display the id="display-area" div element. As a result the code you provided wont appear each time it's shuffled.

Instead, what you can do is add a button instead of a prompt and add an Event Listener.

Below, I edited your code to show how you can achieve your desired output using button and Event Listener instead of prompt.

let scrambleButton = document.getElementById("scramble-button");
        scrambleButton.addEventListener("click", scrambleWord);
        function scrambleWord() {
            let word = document.getElementById("word-input").value;
            let scramble = word.split("").sort(() => Math.random() - 0.5).join("");
            let displayArea = document.getElementById("display-area");
            displayArea.innerHTML = "Original Word: "   word   "<br>Scrambled Word: "   scramble;
        }

<div id="display-area"></div>
<input type="text" id="word-input">
<button id="scramble-button">Scramble</button>

Explanation: The word input id input element accepts data from the user. Whenever the scramble-button id button element is clicked, it will trigger the Event Listener calling the scrambleWord() and shuffle the word. I hope this will help you.

CodePudding user response：

I'm not sure but I think this might be due to the script loading before your DOM tree is finished loading. you can fix this by adding the defer tag after your script

Try it out and let me know if it worked :)

src = https://javascript.info/script-async-defer

CodePudding user response：

As explained by @JohnnyMopp in the first comment, the loop is blocking the renderer from updating. But if you don't have to use prompt for this assignment then you can implement the main functionality using a form with a text field, where the user enter the word, and a submit button that will scramble the word when you click on it:

document.getElementById("word-form").addEventListener("submit", function(e) {
  e.preventDefault();
  let word = document.getElementById("word").value;
  let scramble = scrambleWord(word);
  displayWord(scramble);
});

/*let word = prompt("Enter a word:");

while (true) {
    let scramble = scrambleWord(word);
    displayWord(scramble);

    let again = prompt("Scramble again? (y/n)");
    if (again === "n") {
        break;
    }
}*/

function scrambleWord(word) {
    word = word.split("").sort(() => Math.random() - 0.5).join("");
    return word;
}

function displayWord(scramble) {
    let displayArea = document.getElementById("display-area");
    displayArea.innerHTML = scramble;
}

<!DOCTYPE html>
<html>

<body>
  <form id="word-form">
    <label>
      Enter a word:
      <input type="text" name="word" id="word" />
    </label>
    <input type="submit" name="submit" id="submit" value="submit" />

  </form>
  <div id="display-area"></div>
</body>

</html>