为什么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将为空，因为您尚未分配任何值。就如此容易。