Input.value создает странную задержку в моем console.log - PullRequest
Новая
       15

Input.value создает странную задержку в моем console.log

1 голос
/ 25 марта 2020

У меня есть текстовый ввод на странице. Я пытаюсь сделать так, чтобы, когда я набираю символы на входе, это вызывает изменение текста # fourChord. Console.log отвечает, но первый входной символ игнорируется. Если я введу «а» в текстовое поле, в консоли ничего не появится, пока я не введу «аа», которое отображается как «а». Если я ввожу «aba», консоль регистрирует «ab». "abab" становится "aba" et c. Как мне сделать так, чтобы это не задерживало мой первый ввод? 

<div class="container square">
    <div class="container">
        <p class="big">1-4-5</p>  
        <p class="toHide">Chord Progression</p>
        <p class="toHide">Calculator</p>
        <p class="errorMessage hide">Sorry! That chord does not exist!</p>
    </div>
    <div class="row">   
        <input class="col-sm-12" id="input" type="text" placeholder="Enter root chord">
        </div>

    <div class="container">
        <div class="row d-flex justify-content-around">
            <div id="fourChord" class="col-sm-4">4</div>
            <div id="fiveChord" class="col-sm-4">5</div>
        </div>
    </div>
</div>




input.addEventListener('keypress', function(){
    var input = document.getElementById('input');
    console.log(input.value);
    fourChord.textContent = input.value;
});

1 Ответ

0 голосов
/ 25 марта 2020

Событие нажатия клавиши происходит до изменения входа. поэтому всегда игнорируется последнее введенное значение, события

keypress запускаются перед добавлением нового символа на вход. Таким образом, первое событие нажатия клавиши запускается до добавления первого символа, в то время как ввод остается пустым. Если вы проверите консоль, вы увидите пустую строку в консоли, прежде чем увидите значение во вводе. Например, если вы наберете 1, вначале вы увидите пустую строку в консоли, а затем введите другой символ, в этот момент вы увидите, что он показывает 1.

Вы можете использовать * Событие 1010 * или keyup для получения обновленного значения.

Пример с событием ввода: 

let input = document.getElementById("input");
input.addEventListener('input', function() {
    console.log(this.value);
    fourChord.textContent = this.value;
});
<div class="container square">
    <div class="container">
        <p class="big">1-4-5</p>
        <p class="toHide">Chord Progression</p>
        <p class="toHide">Calculator</p>
        <p class="errorMessage hide">Sorry! That chord does not exist!</p>
    </div>
    <div class="row">
        <input class="col-sm-12" id="input" type="text" placeholder="Enter root chord">
    </div>
    <div class="container">
        <div class="row d-flex justify-content-around">
            <div id="fourChord" class="col-sm-4">4</div>
            <div id="fiveChord" class="col-sm-4">5</div>
        </div>
    </div>
</div>
...