CODEWITHSUNDEEP
javascript
karlijn
karlijn

Reputation: 3

How to make a js array list, print it one by one?

For a small game I'm making, the array list needs to be put in a html element, one by one when giving the correct answer inside an input field. When the answer is wrong, the word needs to be printed with a transparant color.

I already tried using a for loop, but this outputs all strings at once, instead of one by one. I read that I should use ++, but don't know how.

It should print the words one by one, in the right order (so the sentence becomes readable). The code doesn't give any errors at the moment, but doesn't give the desired result.

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();
    }

Upvotes: 0

Views: 161

Answers (2)

mplungjan
mplungjan

Reputation: 177860

Perhaps you mean something like this?

It is a start in any case

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>

Upvotes: 1

Vishnu Prasad
Vishnu Prasad

Reputation: 330

what i understood from your question is the array words are rinting all together with out any space .

for (i = 0; i < essay.length; i++) {

    tekst += " " + essay[i];

  }

in the loop add a Space

Upvotes: 0

Related Questions