Оповещение не работает

Мое предупреждение в конце моего JavaScript не работает, и я не знаю почему. Я думаю, что соединил правильно, но я не знаю, почему код ничего не делает, когда доходит до предупреждения.

Вот код HTML:

<head>

    <meta charset = "utf-8">

    <link rel = "stylesheet" href = "css/style.css">

    <title>Play Battleship Free Online!</title>

</head>

<body>

    <h1>Play Battleship!</h1>

    <script src = "battleship.js"></script>

    <button onclick = "startGame()">Play!</button>

</body>

вот код для CSS (может не понадобиться):

body {
    font-family: sans-serif;
    text-align: center;
    background-color: mediumseagreen;
}

h1 {
    margin-top: 48px;
    margin-bottom: 48px;
    color: black;

}   

и вот код моего JavaScript:

var randomLoc = Math.floor(Math.random() * 5);
var location1 = randomLoc;
var location2 = location1 + 1;
var location3 = location2 + 1;

var guess;
var hits = 0;
var guesses = 0;
var isSunk = false;

function startGame() {
    while (isSunk == false){
        guess = prompt("Ready, aim, fire! (Enter a number between 1 and 6): ")
        if (guess < 0 || guess > 6){
            alert("Please enter a valid number!");
        }else{
            guesses = guesses + 1;
        }

        if (guess == location1 || guess == location2 || guess == location3) {
            hits++;
            alert("HIT!");
        } if (hits == 3) {
            isSunk = true;
            alert("You sank my battleship!");
        } else {
            alert("MISS!");
        }
    }

    var stats = "You took " + guesses + "guesses to sink the battleship, " + "which means your shooting accuracy was " + (3/guesses);

    alert(stats);

    return;
}

Любая помощь приветствуется.

hits == hits + 1; ничего не делает. Используйте консоль браузера (инструменты разработчика) (нажмите F12) и прочтите все ошибки. Используйте такие инструменты, как JSHint, чтобы немедленно найти проблемы с вашим кодом.
Sebastian Simon 03.08.2018 05:48

спасибо, @Xufox, но моя консоль не показывает ошибок. Есть другие идеи?

user10142469 03.08.2018 05:59

@shafteyMalone Посмотрите на предложенное мной изменение, оно исправит ошибку в вашем коде.

Jack Bashford 03.08.2018 06:00

Проблема на else { alert("MISS!"); }. Он не следует за соответствующим оператором if.

Chan MT 03.08.2018 06:01
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
4
95
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Я обнаружил некоторые ошибки в вашем коде JavaScript, см. Комментарии ниже:

var randomLoc = Math.floor(Math.random() * 5);
var location1 = randomLoc;
var location2 = location1 + 1;
var location3 = location2 + 1;

var guess;
var hits = 0;
var guesses = 0;
var isSunk = false;

function startGame() {
    while (isSunk == false){
        guess = prompt("Ready, aim, fire! (Enter a number between 1 and 6): ")
        if (guess < 0 || guess > 6){
            alert("Please enter a valid number!");
        }else{
            guesses = guesses + 1;
        }

        if (guess == location1 || guess == location2 || guess == location3) {
            hits == hits + 1;
            alert("HIT!");
        } if (hits == 3) {
            isSunk = true;
            alert("You sank my battleship!");

            // Missing a closing curly brace
            else {
                alert("MISS!");
            }
        } // End of while-loop
    } // End of startGame()

Вне startGame ():

    var stats = "You took " + guesses + "guesses to sink the battleship, " + "which means your shooting accuracy was " + (3/guesses);

    alert(stats);

    return;
}

Спасибо, @jsub, но теперь мой код бесконечно зацикливает подсказку. Есть предложения, как это исправить?

user10142469 03.08.2018 06:09

Основная проблема в вашем коде javascript, проверьте следующее:

var randomLoc = Math.floor(Math.random() * 5);
var location1 = randomLoc;
var location2 = location1 + 1;
var location3 = location2 + 1;
var guess;
var hits = 0;
var guesses = 0;
var isSunk = false;
function startGame() {
 while (isSunk == false) {
  guess = prompt("Ready, aim, fire! (Enter a number between 1 and 6): ")
  if (guess < 0 || guess > 6) {
   alert("Please enter a valid number!");
  } else {
   guesses = guesses + 1;
  }

  if (guess == location1 || guess == location2 || guess == location3) {
   hits == hits + 1;
   alert("HIT!");
  }
  if (hits == 3) {
   isSunk = true;
   alert("You sank my battleship!");
  } else {
   alert("MISS!");
  }
 }


 var stats = "You took " + guesses + "guesses to sink the battleship, " + "which means your shooting accuracy was " + (3 / guesses);
 alert(stats);
 return;
}
body {
    font-family: sans-serif;
    text-align: center;
    background-color: mediumseagreen;
}

h1 {
    margin-top: 48px;
    margin-bottom: 48px;
    color: black;

} 
<h1>Play Battleship!</h1>
<button onclick = "startGame()">Play!</button>

Спасибо, @Jagjeet Singh, но это просто помещает мой код в бесконечный цикл подсказок и промахов. Любые идеи, как это исправить?

user10142469 03.08.2018 06:13

Вы упомянули, что ваше оповещение не работает, поэтому мы решили его, вам нужно объяснить, что вы на самом деле хотите сделать

Jagjeet Singh 03.08.2018 06:15
Ответ принят как подходящий

FTFY.

Несколько замечаний:

  1. Math.random генерирует число от 0 до 1, включая 0, но не 1. В исходном коде вы написали Math.random() * 5. Будет получено число от 0 до 5, но не включая 5. Если заполнить это число, вы получите от 0 до 4. Таким образом, location1 может получить значение 0. Это может быть нежелательно.

  2. Правильное форматирование кода важно. В фрагменте кода "Hit" / "Miss" / "Sank" else должен совпадать с блоком "Hit", но из-за форматирования он ошибочно совпадал с блоком "Sank". Из-за форматирования это трудно заметить.

  3. Для проверки логической переменной лучше просто использовать переменную в вашем условии без оператора сравнения. while (isSunk == false) лучше писать как while (!isSunk). Вам не нужно беспокоиться об ошибке при вводе двойного знака равенства, его легче читать. Фактически, в вашем коде вам даже не нужен флаг. while (hits < 3) работает одинаково хорошо.

  4. Экономно объявляйте глобальные переменные. В вашем примере лучше поместить переменные в метод startGame. Это локализует вашу переменную там, где они используются, а также дает дополнительное преимущество в виде возможности «перезапустить игру», когда вы нажимаете Play! кнопку во второй раз.

function startGame() {
    // Randomly generate a number between 0 to 3, and 
    // add 1, 2, 3 to it to get 1 to 6.
    var randomLoc = Math.floor(Math.random() * 4);
    var location1 = randomLoc + 1;
    var location2 = location1 + 1;
    var location3 = location2 + 1;

    var guess;
    var hits = 0;
    var guesses = 0;
    var isSunk = false;

    while (!isSunk){
        guess = prompt("Ready, aim, fire! (Enter a number between 1 and 6): ")
        if (guess < 0 || guess > 6){
            alert("Please enter a valid number!");
        } else {
            guesses = guesses + 1;
        }

        if (guess == location1 || guess == location2 || guess == location3) {
            hits++;
            alert("HIT!");

            if (hits == 3) {
                isSunk = true;
                alert("You sank my battleship!") 
            }
        } else {
            alert("MISS!");
        }             
    }
    var stats = "You took " + guesses + " guesses to sink the battleship, " + "which means your shooting accuracy was " + (3/guesses);    
    alert(stats);    
    return; //Optional
}
body {
    font-family: sans-serif;
    text-align: center;
    background-color: mediumseagreen;
}

h1 {
    margin-top: 48px;
    margin-bottom: 48px;
    color: black;

} 
<html>
    <head>    
        <meta charset = "utf-8">    
        <link rel = "stylesheet" href = "css/style.css">    
        <title>Play Battleship Free Online!</title>    
    </head>

    <body>    
        <h1>Play Battleship!</h1>    
        <script src = "battleship.js"></script>    
        <button onclick = "startGame()">Play!</button>    

    </body>
</html>

Спасибо, Chan MT! Это решило мою проблему. Спасибо всем за помощь!

user10142469 03.08.2018 08:28

Другие вопросы по теме