CODEWITHSUNDEEP
javascripthtmlbutton
Hypherius241
Hypherius241

Reputation: 3

Javascript and HTML button not working?

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>

Upvotes: 0

Views: 116

Answers (1)

Gordon Gustafson
Gordon Gustafson

Reputation: 41259

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. :)

Upvotes: 2

Related Questions