javascript - 单击事件后清除 JavaScript 中的输入字段

Question

我用 JavaScript 制作了一个简单的列表项页面。一切都按预期进行。我想要的是，每次添加新的列表项时，输入字段都应该被清除。因为该值应该被删除。

function addItem() {

  if (document.querySelector('.text-input').value) {

    const listItem = document.createElement('li');
    listItem.className = 'list-item'
    var input = document.querySelector('.text-input').value;
    listItem.textContent = input;
    document.querySelector('.list').appendChild(listItem);
    document.querySelector('.text-input').value = '';


  }

}

document.getElementById('btn').addEventListener('click', addItem);

我实际上通过 addItem 回调函数中的最后一行代码实现了我想要的效果。但是，如果我编写 input = '';，而不是编写 document.querySelector('.text-input').value = '';，则它不起作用。这对我来说没有任何意义，因为我在该函数中声明了该变量并将其用于 listItem.textContent = input;如你看到的。

Answer 1

因为这个 var input = document.querySelector('.text-input').value 它是一个用值初始化的变量声明。执行此 input = '' 只是重新分配另一个值。您对引用属性value感到困惑。

您可能想要做的是:

const listItem = document.createElement('li');
listItem.className = 'list-item'

var input = document.querySelector('.text-input'); // Get a reference of element text-input

listItem.textContent = input.value; //Use the current value of text-input.
document.querySelector('.list').appendChild(listItem); 

input.value = ''; // Modify the value of the text-input's reference.