爲什麼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

因爲您在更改內部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行：Console.log仍然會返回空字符串，因爲您沒有將新值重新分配給currentString。

Answer 5

將您的HTML中的<div id="input"></div>更改爲<div id="input">text</div>如果您希望在首次單擊時在控制檯上打印值。首先，input.innerHTML將爲空，因爲您尚未分配任何值。就如此容易。