Javascript - простой подсчет

1

Это мой первый пост и второй день с Javascript;). Я пытаюсь создать простую форму, которая:

  1. Позволяет пользователю вводить буквы или буквы в поле ввода.
  2. Чем я хочу отправить его в свой сценарий и:
    а) проверить, было ли что-либо дано в форме
    б) если пользователь поместил какой-либо знак, я хочу поместить его в массив и подсчитать количество попыток
    c) если количество попыток достигает 10, я хочу остановить скрипт

Мой скрипт не помнит количество попыток. Более того, он сохраняет данные в массиве, но после выполнения скрипта он стирает все (я помещаю в скрипт некоторую консоль.log(), чтобы увидеть, что-нибудь делает). Похоже, что мой счетчик переменных не помнит количество попыток :(.

Как я могу это исправить? - но простым способом кодирования :) (я не хочу делать много изменений в моем коде)

<script type= "text/javascript"> 

var given_letters = []; // create an empty array

function givenLetter() {
    var count = 0;
    var max_count = 10;
    var letter =  document.getElementById('letter').value;

    while (count < max_count) { 
        if (letter ===  "") {
            alert("No letter given");           
            return false;
        } else {            
            count++;  
            given_letters.unshift(letter);
            console.log(letter); // returns letter
            console.log(given_letters); // returns array with 1 element
            console.log(count); // returns "1"
            alert("OK");
            return true;
        }
    }
    while (count === max_count) {
        alert("Sorry. You exceeded the limit of tries.");
        return false;
    }
}                    
</script>


// in BODY section
    <div>
        <form><p>Put your letter here: <input type="text" id="letter"  size="5" required><button onclick="givenLetter();">Send</button></p></form>
    </div>
  • 3
    while (count === max_count) ... вы получите неприятный сюрприз при выполнении этого условия.
  • 1
    Прекратите использовать учебник / страницу, которую вы используете для обучения. Это с 2000 года. Не используйте встроенный JS ( onclick="givenLetter(); ), вместо этого присоедините EventListener.
Показать ещё 2 комментария
Теги:
forms
increment

3 ответа

0
Лучший ответ

Попробуй это. Так как кнопка я в теге формы вводит по умолчанию поведение кнопки. поэтому форма будет отправлена и перезагрузится. Поэтому для предотвращения такого поведения мы используем event.preventDefault(); и сделать счет как глобальную переменную. 

var given_letters = []; // create an empty array
var count = 0;
 

function givenLetter() {
    event.preventDefault(); //to prevent reloading the page.
    var max_count = 10;
    var letter =  document.getElementById('letter').value;

    while (count < max_count) { 
        if (letter ===  "") {
            alert("No letter given");           
            return false;
        }
        else {            
            count++;  
            given_letters.unshift(letter);
            console.log(letter); // returns letter
            console.log(given_letters); // returns array with 1 element
            console.log(count); // returns "1"
            alert("OK");
            return true;
        }
    }
    while (count === max_count) {
        alert("Sorry. You exceeded the limit of tries.");
        return false;
    }
}          
<div>
            <form>
            <p>Put your letter here: <input type="text" id="letter"  size="5" required>
            <button onclick="givenLetter();">Send</button></p></form>
        </div>
Поделиться
  • 0
    Это ваш ожидаемый результат?
  • 0
    Спасибо ;). Это именно то, что мне было нужно: D. Теперь - шаг за шагом - я проверю ваш ответ и код @David Lee, чтобы понять, почему это работает;). Спасибо за вашу помощь !
Показать ещё 3 комментария
2

Вы можете использовать given_letters.length вместо count, меньше кода и того же значения, вам нужно использовать e.preventDefault(); поэтому форма еще не отправляет форму, вот ее рабочий пример для e.preventDefault(); для работы вам нужно отправить событие в кнопку, например:

    <div>
        <form>    
         <p>Put your letter here: <input type="text" id="letter" size="5" required>
         <button onclick="givenLetter(event);">Send</button></p>
        </form>
    </div>

JS обновлено:

var given_letters = []; // create an empty array
function givenLetter(e) {
    e.preventDefault();
    var max_count = 10;
    var letter =  document.getElementById('letter').value;

    while (given_letters.length <= max_count) {
        if (letter ===  "") {
            alert("No letter given");           
            return false;
        }
        else {            
            given_letters.unshift(letter);
            console.log(letter); // returns letter
            console.log(given_letters); // returns array with 1 element
            console.log(given_letters.length);//here is your count already
            alert("OK");
            return true;
        }
    }
    while (given_letters.length === max_count) {
        alert("Sorry. You exceeded the limit of tries.");
        return false;
    }
}
Поделиться
  • 0
    Спасибо за помощь ;).
1

Поведение кнопки по умолчанию в форме - это отправить форму... и перезагрузить страницу (довольно глупо, ИМО). Вот почему ваш сценарий, похоже, ничего не помнит. Но есть способ предотвратить это. Кроме того, напишите var count = 0; вне функции, иначе она будет установлена на 0 при каждом вызове функции.

var count = 0;

function givenLetter(event) {
    event.preventDefault();
    // ....
Поделиться
  • 0
    Он также устанавливает счетчик в 0 при каждом нажатии кнопки
  • 0
    Да, это тоже. На первый взгляд я подумал, что это подсчет букв. Я обновил свой ответ, спасибо
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню