Почему результаты console.log пустые при первом нажатии?

Question

Посмотрите на this ручка.

Откройте консоль браузера, затем нажмите button.

Вы увидите, что результаты консоли выполнены, но в первый раз они пустые. Зачем?

screenshot

Второй щелчок покажет половину входного результата.

Answer 1

Сначала ничего нет в id='input', и вы указываете текст кнопки с id='input', так что в первом нажатии ничего не отображается. поэтому, если вы хотите получить результат 'text' в первом щелчке, сделайте это.

var input = document.getElementById('input'), 
    number = document.getElementById('special'); 

    number.addEventListener("click", function(e) { 

    var currentString = input.innerHTML; 
     console.log(currentString); 
     input.innerHTML += e.target.innerHTML; 
     currentString = input.innerHTML; 
     console.log(currentString); 

    }); 

Answer 2

Во время первого вызова console.log, currentString не определен, потому что нет ничего в поле ввода еще. Следующая строка затем устанавливает значение поля ввода, e.target.innerHTML, которое равно значению .innerHTML кнопки, которую вы только что нажали. Затем следующая строка успешно регистрирует currentString, потому что она уже установлена.

Answer 3

потому что вы назначаете значение id = "input" в строку перед изменением внутреннего html.

изменить код, как этот

var input = document.getElementById('input'), 
number = document.getElementById('special'); 

number.addEventListener("click", function(e) { 


    input.innerHTML += e.target.innerHTML; 

    var currentString = input.innerHTML; 
    console.log(currentString); 
     }); 

Answer 4

1  number.addEventListener("click", function(e) { 
2  
3   var currentString = input.innerHTML; 
4   console.log(currentString); 
5   input.innerHTML += e.target.innerHTML; 
7   console.log(currentString); 
8  
9  }); 

Линия 3: input.innerHTML в данный момент не имеет значения.

Строка 4: Вы пытаетесь зарегистрировать его, что пусто.

Строка 5: вы добавляете к внутреннемуHTML ввода текст с кнопки.

Строка 6: Добавить в innerHTML значение с помощью кнопки.

Строка 7: Console.log по-прежнему будет возвращать пустую строку, поскольку вы не переназначили новое значение currentString.

Answer 5

Изменить <div id="input"></div> на <div id="input">text</div> в вашем формате HTML, если ожидается, что значение будет напечатано на консоли при первом щелчке. Как в первом случае, input.innerHTML будет пустым, поскольку вы не присвоили никакого значения. Так просто.