Question

我正在使用外部javascript页面创建数组的Boggle游戏。我遇到的问题是

Chrome不会在不创建单独显示按钮的情况下显示字母。
当用户输入单词时，直到用户退出游戏时这些单词才显示。

它在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。这将在所有浏览器中正常工作。

chrome不显示innerHTML更改

1 个答案: