Question

我遇到的真正奇怪的问题。我有这个简单的猜谜游戏，问四个问题。它需要用户输入警报，打印到DOM，无论用户是否正确猜测，然后显示图像（绿色复选框或红色x），然后移动到下一个问题。等等，等等。

问题：游戏运行，将消息打印到DOM，但在整个游戏结束之前不显示图像。

奇怪的是，Chrome控制台清楚地显示了＆＃34; src＆＃34;正在正确修改img元素的属性（并且正确地安排文件树以访问图像）。而是显示一个空白框。当然，直到比赛结束。

我的HTML的样子：

<p id="question1" class="rightAnswer" class="wrongAnswer"></p>
<img id="img1" src="" width="100">

JS功能（IIFE＆＃39; s）。每个问题都有一个功能，它们看起来都与这个相同：

var question1 = (function() {
  var userAnswer1 = prompt(arrayQuestions[0]);
  if((userAnswer1.toUpperCase() === "BOSTON") || (userAnswer1.toUpperCase() === "BOS")) {
    // inserts correct or incorrect message after user guesses
    document.getElementById('question1').innerHTML= arrayAnswerCorrect[0];
    // changes color of that message
    document.getElementById('question1').style.color = "green";
    // inserts image via 'src' attribute
    document.getElementById('img1').src = "images/correct.png";

    scoreIt++;
  } else {
    document.getElementById('question1').innerHTML = arrayAnswerIncorrect[0];
    document.getElementById('question1').style.color = "red";
    document.getElementById('img1').src = "images/incorrect.png";
  };
}());

提前谢谢你。这真的让我很难过。

Answer 1

问题和DOM更新在单个代码块中启动，一次询问一个问题，最后在最后一个问题之后完成执行。

但是javascript线程运行完成：一旦启动，在代码返回之前不会中断它们。提示只是阻止javascript线程，直到用户输入信息。尽管浏览器在执行线程期间接受对DOM的修改，并且可能反映DOM元素属性中对DOM的更改，但它们通常会推迟重新呈现页面，直到脚本完成。

您需要重新考虑如何按顺序提问，但在开始下一个问题之前运行每个问题的代码。两种可能性是显而易见的：1）＆＃34;下一个问题＆＃34;按钮，以及2）使用setTimeout调用来调用下一个问题代码。祝你好运; - ）

JS运行后在DOM中加载图像

1 个答案: