chrome не отображает изменения innerHTML

Question

Я создаю игру Boggle, используя внешнюю страницу javascript для создания массивов. Проблема у меня

1. Chrome не отображает буквы без создания кнопки для их отображения отдельно.
2. Когда пользователь вводит слова, слова не отображаются, пока пользователь не выйдет из игры.

Он отлично работает на Firefox, но я хочу, чтобы он работал и в Chrome.

Есть предложения?

function words(x) {
  switch (x) {
    case 1:
      var word = new Array("balte", "table", "hat", "tab", "belt", "lab", "eat", "tea", "ate", "tale", "bale", "let", "bet", "teal", "late", "beat");
      break;
    case 2:
      var word = new Array("atwre", "water", "wet", "wear", "tear", "war", "ret", "rate", "eat", "ate", "tea", "awe", "raw", "rat", "wart", "art", "tar");
      break;
    case 3:
      var word = new Array("dclaen", "can", "cane", "and", "clan", "lane", "lean", "lend", "land", "den", "dean", "dance", "lance", "clean", "deal", "ale", "dale", "candle", "clad");
      break;
    case 4:
      var word = new Array("aepinlar", "air", "airplane", "plane", "plan", "lane", "lean", "pane", "ear", "near", "nap", "nape", "lair", "pen", "pan", "ape", "leap", "ale", "peal", "nap", "rap", "par", "pare", "pale", "are", "rail", "ail", "pail", "nail", "air", "pair", "ran", "pin", "pine", "line", "nip", "rip", "ripe", "lip", "earn", "learn", "ire");
      break;
    case 5:
      var word = new Array("redykboa", "keyboard", "key", "board", "bored", "bore", "bark", "dark", "dork", "oar", "boar", "ark", "dare", "bare", "are", "red", "rod", "road", "bode", "rode", "ode", "bread", "read", "bead", "bred", "break", "drey", "day", "boy", "broke", "rake", "bake", "ear", "dear", "bear", "dye", "dyer", "doer", "oak", "boa", "doe", "okay", "dab", "bade", "ade", "drake", "bard", "yard", "year", "beak", "beard", "bad", "bed", "bay");
      break;
  }
  return word;
}

compWords = new Array();
notAword = new Array();
playWords = new Array();

function displayLetters() {
  var num = Math.floor(Math.random() * 5) + 1;
  compWords = words(num);
  yourWord = compWords[0];
  document.getElementById("letters").innerHTML = yourWord;
}

function displayEntries() {
  document.getElementById("entries").innerHTML = playWords.toString();
}

function boggle() {
  var play = "";
  var score = 0;
  var flag = 0;

  //get player entries
  while (play != "Q") {
    play = prompt("enter a word or enter Q when done");
    playWords.push(play);
    if (play != "Q")
      //document.getElementById("entries").innerHTML = playWords.toString();
      displayEntries();
  }

  // check winning score and list bad words
  var complgth = compWords.length;
  var playlgth = (playWords.length - 1);
  for (var i = 0; i < playlgth; i++) {
    flag = 0;
    for (var k = 0; k < complgth; k++) {
      if (playWords[i] == compWords[k]) {
        score++;
        flag = 1;
      }
    }
    if (flag == 0)
      notAword.push(playWords[i]);
  }
  document.getElementById("result").innerHTML = ("Your score is " +
    score + ". The following entries " +
    "are not valid words: <br />" +
    notAword.toString());
}

body {
  background-color: #000040;
  color: #88ffff;
  font-family: Verdana, Arial, sans-serif;
}

#container {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  min-width: 700px;
}

#logo {
  text-align: center;
  margin: 0;
  font-family: Geneva, Arial, Helvetica, sans-serif;
  padding-top: 30px;
  padding-bottom: 20px;
}

#nav {
  float: left;
  width: 200px;
  padding-top: 10px;
  text-align: left;
  color: #88FFFF;
  font-size: 12px;
}

#nav a {
  text-decoration: none;
  margin: 15px;
  display: block;
  color: #88FFFF;
  font-size: 12px;
}

#content {
  margin-left: 150px;
  padding: 30px;
  overflow: auto;
  border: medium groove #88FFFF;
  line-height: 135%;
}

.floatright {
  padding-left: 20px;
  float: right;
}

.floatleft {
  float: left;
  padding: 30px 0px 20px;
}

#footer {
  font-size: .60em;
  font-style: italic;
  text-align: center;
  border-top: 2px double #000040;
  padding-top: 20px;
  padding-bottom: 20px;
}

h2 {
  text-transform: uppercase;
  color: #88ffff;
  font-size: 1.2em;
  border-bottom: 1px none;
  margin-right: 20px;
}

h3 {
  color: #88ffff;
  font-size: 1.2em;
  border-bottom: 1px solid #000000;
  margin-right: auto;
  text-align: left;
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  line-height: 120%;
}

.details {
  padding-left: 20%;
  padding-right: 20%;
}

img {
  border: 0;
}

.content {
  margin: 20px;
  padding: 20px;
  height: 3700px;
  width: 500px;
}

a {
  text-decoration: none;
  margin: 15px;
  display: block;
  color: #88FFFF;
  font-size: 12px;
}

a:hover {
  color: #000040;
  background-color: #88ffff;
}

span {
  font-size: 20px;
  font-weight: bold;
  font-family: "Courier New", Courier, mono;
  color: #88ffff;
  background-position: center center;
  text-align: center;
  vertical-align: middle;
}

table {
  border-collapse: collapse
}

td {
  border: 2px solid #88ffff;
  width: 5em;
  color: #88ffff;
}

.nobdr {
  border: none;
  cell-padding: 5px;
}

.OK {
  border-radius: 50%;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>
  <title>Greg's Gambits | Greg's Game of Boggle</title>
  <link href="greg.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="gregBoggle.js"></script>
  <script>
  </script>

</head>

<body>
  <div id="container">
    <img src="images/superhero.jpg" width="120" height="120" class="floatleft" />
    <h1 align="center"><em>Greg's Game of Boggle</em></h1>
    <div style="clear:both;"></div>
    <div id="nav">
      <p><a href="index.html">Home</a>
        <a href="greg.html">About</a>
        <a href="play_games.html">Play a Game</a>
        <a href="signin.html">Sign In</a>
        <a href="contact.html">Contact Us</a></p>
    </div>
    <div id="content">
      <p>The object of the game is to create as many words as you can, in a given time limit, from the letters show below. When you are ready to begin, click the Diplay letters button, then Begin game button.</p>
      <p><input type="button" value="Display letters" onclick="displayLetters();" /></p>
      <p><input type="button" value="Begin the game" onclick="boggle();" /></p>

      <h2><br /><br />Letters you can use:<br />
        <div id="letters">&nbsp;</div><br /></h2>
      <h2>Your words so far: <br />
        <div id="entries">&nbsp;</div><br /></h2>
      <h2>Results:<br />
        <div id="result">&nbsp;</div>
      </h2>
    </div>
    <div id="footer">Copyright &copy; 2013 Greg's Gambits<br />
      <a href="mailto:foulksy@gmail.com">foulksy@gmail.com</a>
    </div>
  </div>
</body>

</html>

Answer 1

Браузеры не обязаны отображать изменения DOM до тех пор, пока сценарий не завершится и не вернется к основному циклу событий. Firefox также делает это, когда вы звоните prompt(), но я не думаю, что это требуется.

Вместо использования цикла while следует использовать элемент ввода, который заполняет пользователь. Затем можно использовать прослушиватель событий, чтобы прочитать ввод и обновить DOM. Это будет работать во всех браузерах.