Displaying a large string in sentences one click at a time

Question

#branchID pool
branch0 = "This is a wall of text. This is a wall of text. This is a wall of text. This is a wall of text. This is a wall of text. This is a wall of text."
branch1 = "This is a second wall of text."
branch2 = "This is a third wall of text."

#classes section
  #pulls text from pools above.
branch = (name, branchid)->
  stringID = String(branchid)
  document.write("<h1 id=\'#{stringID}\'>#{name}</h1>")
  document.getElementById(stringID).onclick = ->
    document.write(branchid)

#This is where the game goes. It will be built with conditionals
window.onload = ->  
  branch('Start', branch0)

I'm creating a browser based "choose your own adventure" game using CoffeeScript. Above is the code I have so far. It creates an HTML element, and when clicked, a string of text is written to the page in one giant block.

My question is, How could I make it so only a sentence at a time is loaded, and then when clicked, the next sentence is loaded, then the next, until there is nothing else left in the string?

Answer 1

While I am not really sure, what it is that you try to accomplish I made a demo for you using your code as base that (hopefully) does what you want:

https://jsfiddle.net/Exinferis/qhr7wjmu/

#branchID pool
firstBranch = [
    "This is a wall of text. This is a wall of text. This is a wall of text. This is a wall of text. This is a wall of text. This is a wall of text."
  "This is a second wall of text."
    "This is a third wall of text."
]

currentStep = 0

#classes section
  #pulls text from pools above.
branch = (event)->
  if firstBranch[currentStep]?
    document.getElementById( "text" ).innerHTML = firstBranch[currentStep]
    currentStep++

#This is where the game goes. It will be built with conditionals
window.onload = ->
    document.getElementById( "nextbtn" ).onclick = branch