Кнопка Javascript и HTML не работает?

Question

У меня проблема, которая действительно бросает меня через привязку. Heres мой код, в основном, вторая кнопка не называет 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: Правильно отступы вашего кода могут облегчить обнаружение ошибок, подобных этому. :)