How can I avoid calling a function within a function?

Question

#branchID pool
branch0 = "This is a wall of text. This is another wall of text! This is a third wall of text. This is a fourth wall of text. This is a fifth wall of text. This is a sixth wall of text. #branch1%"  
branch1 = "This is a second wall of text."
branch2 = "This is a third wall of text."
loopcounter = 0

#classes section
  #pulls text from pools above.

branch = (name, branchid)->
  alert('begin loop')
  stringID = String(branchid)
  document.write("<h1 id=\'#{stringID}\'>#{name}</h1>")

  document.getElementById(stringID).onclick = ->
    for i in [loopcounter...stringID.length]
      if branchid[i]!= "." and branchid[i]!="!" and branchid[i]!="?" and branchid[i]!="#"
        document.write(branchid[i])

      else if branchid[i]=="#"
          j = i+1
          for k in [j...stringID.length]
            if branchid[k] == "%"
              j = k+1
              alert("switchblock")
              switch fcode
                when "branch1" then branch('stuff', branch1)
                when "branch2" then branch('stuff2', branch2)
                else break
              break

            else
              alert("gathering...")
              fcode = ""
              fcode += branchid[k]

      else
        alert('end sentence')
        document.write(branchid[i])
        loopcounter = i+1
        break

#This is where the code is executed.
window.onload = ->  
  branch("Start", branch0)

My code above is the beginning of a Choose your own adventure gamebook.

My code works by executing a function that pulls text from a long string one sentence at a time and writes it to the HTML document.

The issue I'm having is that when the string has no text left, I need to call the very same function again, but this time with different parameters so that a different string can be displayed on the screen. Given my current situation, I've had to call it within it's own function, but I have a feeling that's causing some issues. When I try running my code, It acts up in a way that I really don't understand and writes to the document instead of executing the new function

Any general advice, or specific diagnoses are welcome. I'm just a little stumped at this point and am not sure where to go from here. Maybe I'm not thinking about this correctly? And by the way, I've gotten a lot of help from stack overflow lately. Thank you so much. You guys have been amazing.

**I threw in a bunch of alert boxes so I could try figuring out what the loop was doing.

Codepen posting: http://codepen.io/bryanwillis7/pen/WwMPaw

There is nothing inherently wrong with recursive functions. I would suggest organizing your data into Javascript objects instead of trying to parse your way through string codes. — user24950814234
– user24950814234, Commented Apr 18, 2016 at 20:19

user24950814234 · Accepted Answer · 2016-04-18 21:02:15Z

1

Here is a simplification of what you're trying to do.

Live DEMO:

https://jsfiddle.net/69r0xq9y/

In general, I suggest organizing your data into objects and consuming it that way. String parsing can lead to some unnecessary unreadable code.

HTML:

<h1 id="name">
  <!-- Branch name inserted here -->
</h1>
<p id="text">
  <!-- Branch text inserted here -->
</p>
<div id="options">
  <!-- Branch options inserted here -->
</div>

Coffeescript:

#branchID pool
branches = 
  branch0:
    name: "Start"
    text: "There is a path to a forest and a path to a castle. Where do you want to go?"
    options: 
      branch1: "Forest"
      branch2: "Castle"
  branch1: 
    name: "Forest"
    text: "You are in a forest."
    options:
      branch0: "Go back to start"
  branch2: 
    name: "Castle"
    text: "You are in a castle."
    options:
      branch0: "Go back to start"

#classes section
#pulls text from pools above.
branch = (branchid)->
  document.getElementById('name').innerHTML = branches[branchid].name
  document.getElementById('text').innerHTML = branches[branchid].text
  document.getElementById('options').innerHTML = ''
  for targetBranch,buttonText of branches[branchid].options
    createOption(targetBranch, buttonText)

createOption = (branchid, text) ->
  button = document.createElement('button')
  button.innerHTML = text
  button.onclick = ->
    branch(branchid)
  document.getElementById('options').appendChild(button)

#This is where the code is executed.
window.onload = ->  
  branch("branch0")

edited Apr 18, 2016 at 21:02

answered Apr 18, 2016 at 20:42

user24950814234

2,0371 gold badge17 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bryanwillis7 Over a year ago

This helps a lot and I will be organizing my code into objects like you have here. Thank you so much for taking the time to create a working demo for me! I wish I could mark two people's answers as "correct" :(

Jon Laing · Accepted Answer · 2016-04-18 20:13:39Z

Wow, this is a doozy, but I think I've got it working:

#branchID pool
branch0 = "This is a wall of text. This is another wall of text! This is a third wall of text. This is a fourth wall of text. This is a fifth wall of text. This is a sixth wall of text. #branch1%"  
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)->
  loopcounter = 0
  alert('begin loop')
  stringID = String(branchid)
  document.write("<h1 id=\'#{stringID}\'>#{name}</h1>")
  document.getElementById(stringID).onclick = ->
    for i in [loopcounter...stringID.length]
      if branchid[i]!= "." and branchid[i]!="!" and branchid[i]!="?" and branchid[i]!="#"
        document.write(branchid[i])
      else if branchid[i]=="#"
          j = i+1
          fcode = ""
          for k in [j...stringID.length]
            if branchid[k] == "%"
              j = k+1
              alert("switchblock")
              switch fcode
                when "branch1" then return branch('stuff', branch1)
                when "branch2" then return branch('stuff2', branch2)
                else break
              break
            else
              alert("gathering...")
              fcode += branchid[k]

      else
        alert('end sentence')
        document.write(branchid[i])
        loopcounter = i+1
        break

#This is where the code is executed.
window.onload = ->  
  branch("Start", branch0)

Okay, so I had to change only a couple things. I moved fcode out of the switch block and put it right before the k loop. Also, I defined loopcounter in the branch function scope, otherwise it won't reset, and you'll get an index out of bounds issue, which will result in it printing undefined about a million times. Lastly, I added return right before the recursive calls. This makes the parent function stop executing.

Honestly, though, I think you should seriously consider refactoring this into smaller bits. All this nested looping makes it really hard to follow what's going on. Try making one function for just checking if this is the end of the sentence, another for checking if you're starting a new branch, and another for gathering up the string.

Making your code in smaller chunks will also make it easier to test and change later.

Hope that helps.

Thank you so much for plowing through my code and pointing out the errors. I know it must have been quite the undertaking, as I'm realizing how I could have organized this better and avoided some of these issues. Either way, I'm really glad I've posted my progress here, as it's given me a better understanding of organization. This is my first coding project that I'm doing on my own, so I'm learning a lot as I go.

Collectives™ on Stack Overflow

How can I avoid calling a function within a function?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related