Блог

Главная - Вопросы по программированию - 2 функции не работают, вместо этого они показывают ошибки, если я нажимаю на кнопки

2 функции не работают, вместо этого они показывают ошибки, если я нажимаю на кнопки

#javascript #html

#javascript #HTML

Вопрос:

Я новичок в программировании на JS, и мне нужна помощь.

HTML-код:

 <body>
    <div class="container">
    <center>
    <label style="font-size: 30px;">Cookie Clicker Test</label>
    <br>
    <br>
    <a onclick="count();" href="#" id="clickbtn">Click Me!</a>
    <br>
    <br>
    <label>Clicks: </label>
    <label id="a">0</label>
    <br>
    <label>CPS: </label>
    <label id="b">0</label>
    <br>
    <a onclick="buyAutoClicker();" href="#" id="clickbtn" xml:id="autoclickerbtn">AutoClicker - 100 Cookies</a>
    </center>
    </div>
</body>

JS-код

 <script>
var a = 0;

function count() {
    a  = 1;
    document.getElementById("a").innerHTML = a;
    document.getElementById("b").innerHTML = a / 10;
}

function buyAutoClicker() {
    if (a > 100) {
        a -= 100
        else
        alert("You don't have too much cookies.");
    }
}

</script>

Моя проблема в том, что если я нажимаю кнопку, отображается сообщение об ошибке, в котором говорится, что «count ()» не определен, а если я попробую другую кнопку, там написано, что «buyAutoClicker ()» не определен, если я удалю одну функцию, ошибок не будет.

Ошибка:

 Uncaught ReferenceError: count is not defined
onclick

Uncaught ReferenceError: buyAutoClicker is not defined
onclick

Любая помощь? Спасибо.

Комментарии:

1. Используете ли вы JavaScript на странице HTML или в виде отдельного файла. Если отдельный файл, вам нужно добавить ссылку на него

2. Если вы используете встроенное размещение проверки.

3. Если код JS является встроенным, проверьте его на наличие синтаксических ошибок. Если он поступает из внешнего файла, убедитесь, что файл действительно загружен. Синтаксические ошибки можно увидеть в консоли DevTools, и вы можете проверить вкладку Network, чтобы узнать, загружен ли файл JS.

Ответ №1:

Непосредственная проблема заключается в том, что оператор else неправильно отформатирован в вашем JS-коде, если вы добавите фигурные скобки вокруг else (или полностью удалите фигурные скобки из оператора if), он должен работать:

 var a = 0;

function count() {
    a  = 1;
    document.getElementById("a").innerHTML = a;
    document.getElementById("b").innerHTML = a / 10;
}

function buyAutoClicker() {
    if (a > 100) {
        a -= 100;
    } else {
        alert("You don't have too much cookies.");
    }
}

/* Not using braces after compound statements (e.g. if, else, etc.) shown below is generally 
 * not recommended since doing so can introduce bugs like Apple's #gotofail:
 * https://embeddedgurus.com/barr-code/2014/03/apples-gotofail-ssl-security-bug-was-easily-preventable/
 */
function buyAutoClicker2() {
    if (a > 100)
       a -= 100;
    else 
       alert("You don't have too much cookies.");
} 
 <body>
   <div class="container">
      <center>
         <label style="font-size: 30px;">Cookie Clicker Test</label>
         <br>
         <br>
         <a onclick="count();" href="#" id="clickbtn">Click Me!</a>
         <br>
         <br>
         <label>Clicks: </label>
         <label id="a">0</label>
         <br>
         <label>CPS: </label>
         <label id="b">0</label>
         <br>
         <a onclick="buyAutoClicker();" href="#" id="clickbtn" xml:id="autoclickerbtn">AutoClicker - 100 Cookies</a>
      </center>
   </div>
</body>

Ответ №2:

Добавьте тег чуть ниже тега, например

 <body>
  <script>
  .
  .
  </script>
  .
</body>

А также использовать разные идентификаторы для обеих кнопок. Они используют тот же id = ‘clickbtn’.