如何制作一个js数组列表,一张一张地打印出来?

时间:2019-06-12 12:25:20

标签: javascript

对于我正在制作的一款小型游戏,需要将数组列表放在html元素中,当在输入字段中给出正确答案时,将数组列表一一放置。如果答案有误,则该单词需要用透明的颜色印刷。

我已经尝试过使用for循环,但是这会一次输出所有字符串,而不是一个一个地输出。我读到我应该使用++,但不知道如何。

它应该以正确的顺序逐个打印单词(这样句子变得可读)。该代码目前没有给出任何错误,但没有给出预期的结果。

form.onsubmit = (e) => {
    var essay = ["Slow", "Reading - ", "Carolyn", "Strauss", "By", "definition,", "‘reading’", "goes", "well", "beyond", "the", "grasping", "of", "written", "characters", "and", "the", "realm", "of", "ideas", "they", "express.", "Applied", "to", "environments,", "systems,", "and", "relationships,", "‘reading’"];
    var tekst = "";
    var i;
    for (i = 0; i < essay.length; i++) {
      tekst += essay[i];
    }
    if (input.value === text.style.color) {
      goodAnswers++;
      document.getElementById("essaywords").innerHTML = essay[i];
    }
    // here you do what ever supposed to happen after a good answer
    else {
      badAnswers++;
      document.getElementById("essaywords").innerHTML = "False!";
      // here you do what ever supposed to happen after a wrong answer


      setColor();
    }

2 个答案:

答案 0 :(得分:1)

也许你的意思是这样的吗?

无论如何这都是一个开始

var essay = ["Slow", "Reading - ", "Carolyn", "Strauss", "By", "definition,", "‘reading’", "goes", "well", "beyond", "the", "grasping", "of", "written", "characters", "and", "the", "realm", "of", "ideas", "they", "express.", "Applied", "to", "environments,", "systems,", "and", "relationships,", "‘reading’"];

var cnt = 0,
  goodAnswers = 0,
  badAnswers = 0;
document.getElementById("form").addEventListener("submit", (e) => {
  if (cnt >= essay.length) return;
  e.preventDefault(); // stop actual submission    
  if (document.getElementById("textInput").value === "yes") { // I do not know what you mean by text.style.color
    goodAnswers++;
    document.getElementById("essaywords").innerHTML += essay[cnt]+" ";
  } else {
    badAnswers++;
    document.getElementById("essaywords").innerHTML += '<span style="color:white">' + essay[cnt] + ' </span>'
  }
  cnt++
})
<form id="form">
  <input type="text" id="textInput" value="" />
  <input type="submit" value="GO" />
</form>
<div id="essaywords"></div>

答案 1 :(得分:0)

从您的问题中我了解到的是,数组单词正在全部冲洗而没有任何空格。

for(i = 0; i

    tekst += " " + essay[i];

  }

在循环中添加一个空格