Javascript和HTML按鈕不起作用？

Question

我有一個問題，真的讓我通過綁定。 繼承我的代碼，基本上，第二個按鈕不會調用fightScene（），但是fightScene可以直接從代碼中使用。

我拿出了一些對於尺寸限制都不重要的東西，所以沒有人偷了它......這是我的一個非常新的項目，用它來做學校項目。 任何人都可以告訴我的任何事情都將非常感謝！

<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>

Answer 1

與幾乎所有語言一樣，Javascript將函數聲明的內容放在與全局聲明的內容不同的范圍內。 由於fightScene()函數內聲明的nextThing()你只能從函數中訪問它，所以當你去做到這一點：

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

函數fightScene沒有在那里定義，所以它不會被調用。 事實上，如果你使用你的瀏覽器來查看你的javascript錯誤，你應該看到每次單擊按鈕時都會出現一個新的錯誤，沿着fightScene() is not defined行。

如果你全局定義fightScene() ，你的代碼應該可以正常工作。

---

如果您想知道，有時候您不希望函數全局可見，這就是javascript允許您在其他函數中定義它們的原因。 以這種方式隱藏函數可能會減少您需要閱讀以理解程序的代碼量，因為您可以確保嵌套函數僅在聲明它的函數中定義。 因此，如果在其他任何地方都沒有使用該函數，那么這樣做是個好主意，但在您的程序中並非如此。

PS：正確縮進代碼可以更容易地發現這樣的錯誤。 :)