我试图通过使用普通JavaScript构建todo应用程序的基础，来制作一个非常基本的费用跟踪器。我很难分离所有三个输入条的值，并让它们显示在页面上。目前，我得到了3[objectHTMLInputElement]和未定义。我只想知道我是否在正确的轨道上，或者是否有一种更简单的方法来隔离多个输入值并使它们显示在页面上。如果有人能给我指明正确的方向，那就太棒了。谢谢！

顺晟科技：

1. 当使用它时，它是return a（由另一边的所有选定元素组成），也有返回-无论使用什么，都需要循环以获得每个选定输入的值
2. 当您以innerHTML的形式传递时，将返回元素对象名，而不是该元素的值，因为您没有选择该对象的任何属性，因此无法将对象设置为html元素

• 如果您想要正确的方式处理这部分，它将是这样的

let addButton = document.getElementById('add-btn');
addButton.addEventListener('click', add);
let inputName = document.getElementById('input-name');
let inputDate = document.getElementById('input-date');
let inputAmount = document.getElementById('input-amount');
let inputAll = document.querySelectorAll('.input-all');

let expenses = [
]

function add() {
  let inputs = inputAll.value;
  if (inputs == '') {
    return true;
  }
  expenses.push(inputs);
  displayExpenses();
}

function remove() {
}

function displayExpenses() {
  let expensesUl = document.getElementById('expenses-ul');
  expensesUl.innerHTML = `${inputName}${inputDate}${inputAmount}`;

  for (var i = 0; i < expenses.length; i++) {
    let expensesLi = document.createElement('li');
    expensesLi.innerHTML = expenses[i];
    expensesUl.appendChild(expensesLi);
  }
}

• 但是现在因为我们选择了所有元素，所以我们不再需要一个接一个地选择每一个输入，我们将做一个循环，所以我们将通过var循环来获得Object的值

let addButton = document.getElementById('add-btn');
addButton.addEventListener('click', add);
let inputName = document.getElementById('input-name');
let inputDate = document.getElementById('input-date');
let inputAmount = document.getElementById('input-amount');
let inputAll = document.querySelectorAll('.input-all');

let expenses = [
]

function add() {
  let inputs = inputAll.value;
  if (inputs == '') {
    return true;
  }
  expenses.push(inputs);
  displayExpenses();
}

function remove() {
}

function displayExpenses() {
  let expensesUl = document.getElementById('expenses-ul');
  expensesUl.innerHTML = `${inputName}${inputDate}${inputAmount}`;

  for (var i = 0; i < expenses.length; i++) {
    let expensesLi = document.createElement('li');
    expensesLi.innerHTML = expenses[i];
    expensesUl.appendChild(expensesLi);
  }
}

• 在上面的示例中，我删除了数组，但是如果您想用它来获取输入值，可以这样做

let addButton = document.getElementById('add-btn');
addButton.addEventListener('click', add);
let inputName = document.getElementById('input-name');
let inputDate = document.getElementById('input-date');
let inputAmount = document.getElementById('input-amount');
let inputAll = document.querySelectorAll('.input-all');

let expenses = [
]

function add() {
  let inputs = inputAll.value;
  if (inputs == '') {
    return true;
  }
  expenses.push(inputs);
  displayExpenses();
}

function remove() {
}

function displayExpenses() {
  let expensesUl = document.getElementById('expenses-ul');
  expensesUl.innerHTML = `${inputName}${inputDate}${inputAmount}`;

  for (var i = 0; i < expenses.length; i++) {
    let expensesLi = document.createElement('li');
    expensesLi.innerHTML = expenses[i];
    expensesUl.appendChild(expensesLi);
  }
}

• 整个代码应该是这样的

let addButton = document.getElementById('add-btn');
addButton.addEventListener('click', add);
let inputName = document.getElementById('input-name');
let inputDate = document.getElementById('input-date');
let inputAmount = document.getElementById('input-amount');
let inputAll = document.querySelectorAll('.input-all');

let expenses = [
]

function add() {
  let inputs = inputAll.value;
  if (inputs == '') {
    return true;
  }
  expenses.push(inputs);
  displayExpenses();
}

function remove() {
}

function displayExpenses() {
  let expensesUl = document.getElementById('expenses-ul');
  expensesUl.innerHTML = `${inputName}${inputDate}${inputAmount}`;

  for (var i = 0; i < expenses.length; i++) {
    let expensesLi = document.createElement('li');
    expensesLi.innerHTML = expenses[i];
    expensesUl.appendChild(expensesLi);
  }
}

• 关于，一个不同之处在于，您可以使用像with这样的数组方法，而不能使用

试试这个