Question

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

＆＃13;

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);

＆＃13;

我实际上在addItem回调函数中实现了我想要的最后一行代码。但是，如果我写document.querySelector('.text-input').value = '';而不是写input = '';，那么它就不起作用了。这对我没有任何意义，因为我在该函数中声明了该变量并将其用于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.

点击事件

1 个答案: