0

Im having a problem that is really throwing me through a bind. Heres my code, basically, the second button wont call fightScene(), but fightScene is usable straight from the code.

I took out some bits that werent important for both size constraints and just so no one steals it... its a very new project of mine, using it for a school project. Anything anyone can tell me would be great thanks!

<script>
var damage = 10;
var enemyHealth;
var fightText = "You come across a shady looking figure. He pulls his blade and you    pull your weapon.";

function nextThing() {
    x = Math.floor((Math.random() * 4) + 1);

    if (x == 1) {
        woodsWalk();
    }
    if (x == 2) {
        riverWalk();
    }
    if (x == 3) {
        caveWalk();
    }
    if (x == 4) {
        shadyFigure();
    }

    function shadyFigure() {
        document.getElementById("output").innerHTML = fightText;
        document.getElementById("forwardButton").disabled = true;
        document.getElementById("continueButton").style.visibility = "visible";
        enemyHealth = 50;
        fightScene();
    }

    function fightScene() {
        if (enemyHealth > 0) {
            enemyHealth = enemyHealth - 10;
            fightText = fightText + "<br/> You deal " + damage + " damage. <br/> Enemy Health: " + enemyHealth;
            document.getElementById("output").innerHTML = fightText;
        } else {
            document.getElementById("continueButton").style.visibility = "hidden";
            document.getElementById("forwardButton").disabled = false;
            nextThing();
        }
    }
}
</script>

<table border="1" width="80%" align="center">
    <tr>
        <td width="60%">

            <button onclick="nextThing()" id="forwardButton">Forward</button>
            <br/>
            <!--Make an image-->
        </td>
        <td width="20%" valign="top">

            <p id="items">Items:</p>

        </td>
    </tr>
    <tr>
        <td colspan="2">
            <p id="output"></p>
            <button onclick="fightScene()" style="visibility:hidden; float:right" id="continueButton">Continue</button>
        </td>
    </tr>
</table>
some
  • 48,070
  • 14
  • 77
  • 93
Hypherius241
  • 3
  • 4
  • Sorry my bad that was incorrect, you have nested function I don't think you can call it like that.. your fightScene() is nested inside the nextThing() – I am Cavic Dec 25 '13 at 03:55
  • Where at? If you mean behind the onClick in the button, its not that, because the other button calls another function without it, and I also tested to be sure. – Hypherius241 Dec 25 '13 at 03:57
  • 2
    Here is what you need to do: http://stackoverflow.com/questions/8817872/javascript-call-nested-function (Your function is nested and you can't call it directly ) – I am Cavic Dec 25 '13 at 03:58
  • Can you explain this to me a little more? I dont completely understand. I think what its saying is the method is already running so I need to call it from there? – Hypherius241 Dec 25 '13 at 04:00
  • first of all your code missing caveWalk(); and all of those functions in the first one. – Mutant Dec 25 '13 at 04:01
  • Both of your methods shadyFight() and fightScene() are nested with in the nextThing() function. So you can't call fightScene() because its not in the scope. – I am Cavic Dec 25 '13 at 04:03
  • Please, no more inline js. https://www.google.com/search?q=Why+is+inline+js+bad%3F – m59 Dec 25 '13 at 04:07
  • @Mutant I took it out to save room, it had no relevance. – Hypherius241 Dec 25 '13 at 04:07
  • Thank you all, I finally got it. I hadnt purposefully nested the method, I forgot a bracket after nextThing() and had an extra at the end of everything, so it wasn't giving me an error. You guys rock <3 – Hypherius241 Dec 25 '13 at 04:10

1 Answers1

2

Javascript, like almost every language, puts things declared in functions in a different scope from things declared globally. Since fightScene() is declared inside the function nextThing(), you can only access it from within that function, so when you go on to do this: 

<button onclick="fightScene()" ... </button>

the function fightScene is not defined there, so it won't get called. In fact, if you use your browser to look at your javascript errors, you should see a new one appear every time you click the button, along the lines of fightScene() is not defined.

If you define fightScene() globally, your code should work fine.

In case you're wondering, there are often times when you don't want a function to be globally visible, which is why javascript lets you define them inside other functions. Hiding functions this way can potentially reduce the amount of code you need to read to understand the program since you can assured that the nested function is only defined within the function where it was declared. Thus, it's a good idea to do this if the function isn't used anywhere else, but that's not the case in your program.

PS: properly indenting your code can make it easier to spot errors like this. :)

Gordon Gustafson
  • 40,133
  • 25
  • 115
  • 157