简体   繁体   中英

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>

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM