word does not display in Chrome until you end the shuffle

Question

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.

I believe the loop is blocking the renderer from updating. [HTML page doesn't update while a javascript function running](https://stackoverflow.com/q/55091016) — 001, Jan 26 '23 at 13:41
Do you have to use `prompt` in this assignment? If not, then try to implement it using a `form` — Alon Eitan, Jan 26 '23 at 13:59

score 1 · Answer 1 · edited Jan 26 '23 at 17:15

To do exactly what you want it´s necessary to put the prompt function inside a promisse and use a setTimeout() function to wait a minimum time to let the browse display the tag in the page.

like this:

function displayWord() {
  getPrompt().then((word) => {
    if (word !== 'n') {
      document.getElementById('display-area').textContent = word
        .split('')
        .sort(() => Math.random() - 0.5)
        .join('');
      displayWord();
    }
  });
}

function getPrompt() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(prompt('Enter a word (enter \'n\' to exit):'));
    }, 30);
  });
}

displayWord();

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

LeKeque · Answer 2 · 2023-01-26T13:40:06.480

0

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

edited Jan 26 '23 at 13:40

answered Jan 26 '23 at 13:39

LeKeque

21
4

It's not it. You can clearly see that the code is placed AFTER the relevant element. And you can't use `async`/`defer` on inline script – Alon Eitan Jan 26 '23 at 13:54

Adrian Gaile Singh · Accepted Answer · 2023-01-26T15:08:00.610

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.

score -1 · Answer 4 · answered Jan 26 '23 at 14:19

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>

word does not display in Chrome until you end the shuffle

4 Answers4