Мобильная функция Jquery не работает == обновление страницы?

Question

Хорошо, это сводит меня с ума. У меня есть простой проект, в котором я использую эту тему мобильной загрузки и эту библиотеку преобразования текста в речь

Всякий раз, когда в моей функции возникает ошибка, страница просто обновляется. Таким образом, я никогда не смогу прочитать вывод с консоли.

Вот мой код:

<script>
    $(document).ready(function() {    
        $('#input-submit').click(function() {
            var text = $('#input-box').val();
            console.log(text);
            for (var i = 0;i < text.length; i++){
                alert('test');
                meSpeak.speak(text.charAt(i));
            }
        });
    });
</script>

Я хочу, чтобы мое приложение произносило вслух все, что заполняет пользователь. Функция работает правильно до meSpeak.speak(text.charAt(i)); линия. Когда я набираю слово из 3 символов, я получаю 3 предупреждения, а затем страница просто обновляется.

Почему он обновляется, когда что-то не работает? Я хочу прочитать вывод из консоли без использования предупреждений. Кроме того, кто-нибудь знает, почему я не могу использовать meSpeak.speak(text.charAt(i)); как это?

Answer 1

Вы не препятствуете кнопке отправки "отправлять" страницу, и, поскольку вы, скорее всего, не указали адресата, она отправляется в то же место, вызывая обновление страницы.

Предотвратить событие click можно в jQuery, returnИНГ false в конце функции

$('#input-submit').click(function () {
    /* etc */
    return false;
});

Демо для игры