Question

看一下this笔。

打开浏览器的控制台，然后点击button。

您将看到控制台的结果已执行但第一次为空。为什么呢？

第二次点击将显示输入结果的一半。

Answer 1

因为在更改内部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 2

首先，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 3

在第一次console.log调用期间，未定义currentString，因为输入框内没有任何内容。然后，下一行设置输入框e.target.innerHTML的值，该值等于您刚刚单击的按钮的.innerHTML的值。然后下一行成功记录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

将HTML中的FolderListModel更改为<div id="input"></div>，如果期望在第一次点击时在控制台上打印值。与第一个实例一样，<div id="input">text</div>将为空，因为您尚未指定任何值。就这么简单。

为什么console.log结果在第一次点击时为空？

5 个答案: