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

Question

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

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

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

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

<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>

Answer 1

Попробуй это. Так как кнопка i внутри тега формы, поведение кнопки по умолчанию отправлено. поэтому форма будет отправлена ​​и перезагрузите страницу. Поэтому для предотвращения такого поведения мы используем 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>

Answer 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;
    }
}                   

Answer 3

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

var count = 0;

function givenLetter(event) {
    event.preventDefault();
    // ....