最初のクリックでconsole.logが空になるのはなぜですか？

Question

thisペンを見てください。

ブラウザのコンソールを開き、buttonをクリックします。

コンソールの結果は実行されますが、最初は空です。どうして？

screenshot

もう一度クリックすると、入力結果の半分が表示されます。

Answer 1

最初はid='input'には何も表示されておらず、id='input'のボタンテキストを連結しているため、最初のクリックで何も表示されません。最初のクリックで'text'という結果が欲しい場合は、このようにします。最初にconsole.log通話中

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

入力ボックス内のものはまだ存在しないため、currentStringが定義されていません。次の行は入力ボックスの値をe.target.innerHTMLに設定します。これは今クリックしたボタンの.innerHTMLの値と等しくなります。次の行は、今設定されているので、currentStringを正常に記録します。

Answer 3

内部HTMLを変更する前に、文字列にid = "input"の値を割り当てるためです。

変更は、この

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行目：ボタンのテキストを入力のinnerHTMLに追加します。

6行目：ボタンの値をinnerHTMLに追加します。

行7：新しい値をcurrentStringに再割り当てしなかったため、Console.logは空の文字列を返します。

Answer 5

最初のクリックでコンソールに値が出力されると予想される場合は、<div id="input"></div>〜<div id="input">text</div>をHTMLで変更してください。最初の例では、input.innerHTMLは値を割り当てていないので空になります。それと同じくらい簡単です。