带有事件监听器的简单 JavaScript 购物清单

Question

这里是超级新手。我需要创建一个杂货清单，将一个项目添加到列表中，删除列表的第一个项目或列表的最后一个项目，并将这些结果显示在底部的数组中。问题是我无法显示添加的项目，因此我无法测试并查看 pop 和 shift 命令是否正常工作。

这就是我现在所拥有的

const groceries = [];

document.getElementById("listAdd").addEventListener("click", listAdd);
document.getElementById("displayList").innerHTML = '';
document.getElementById("deleteFirst").addEventListener("click", deleteFirst);
document.getElementById("deleteLast").addEventListener("click", deleteLast);


//add item to list
function listAdd() {
  console.log(groceries.push());
}

//delete first item in list
function deleteFirst() {
  console.log(groceries.shift());
}

//delete last item in list
function deleteLast() {
  console.log(groceries.pop());
}

//display list
function display() {
  for (let i = 0; i < groceries.length; i++) {
    let item = groceries[i];
  }
}

<h1>Grocery List</h1>
<fieldset>
  <legend> Enter your shopping item below</legend>
  <span id="listAdd"></span>
  <input type="text" id="listAdd" value=><br>
  <input type="button" id="listAdd" value="Add to List"><br>
</fieldset>

<fieldset>
  <legend>Delete the first item in the array</legend>
  <span id="deleteFirst"></span>
  <input type="button" id="deleteFirst" value="Delete First Item"><br>
</fieldset>

<fieldset>
  <legend> Delete the last item in the array</legend>
  <span id="deleteLast"></span>
  <input type="button" id="deleteLast" value="Delete Last Item"><br>
</fieldset>

<fieldset>
  <span id="displayList"></span>
  <legend> Display array</legend>
</fieldset>

Answer 1

我认为部分问题可能是您将多个元素 ID 设置为同一事物。例如，你有一个跨度；文本输入；并将按钮输入全部设置为ID：“listAdd”。 ID 是文档树唯一标识 HTML 元素的方式，因此它们必须不同。

作为猜测，您想要的是当您单击相关按钮时运行“listAdd”函数。因此，您可以执行类似的操作...

<input type="button" id="listAddBtn" value="Add to List"><br>

然后运行代码来添加事件侦听器...

document.getElementById("listAddBtn").addEventListener("click", listAdd);

但实际上，我发现编写已附加事件侦听器的 HTML 更简单...

<input type="button" id="listAddBtn" value="Add to List" onclick="listAdd();"><br>

而且您必须更新这些 ID 对于所有事物来说都是唯一的。作为相关说明，表单元素的“name”属性是服务器端代码用来识别传递的值的属性，因此我将更改您的文本输入以具有 name 属性......

<input type="text" id="listAddVal" name="listAddVal" value=""><br>

我希望这一切都是有用。

编辑...
重新阅读您的帖子以确保我的回复正确并看到安德烈亚斯的快速回复，我将重申他提到的内容：显示功能只是循环浏览您的列表。您需要在 for 循环内添加代码来构建要显示的 HTML，然后设置显示容器元素的 innerHTML 属性。就像...

//display list
function display() {
  let dispElement = window.document.getElementById("displayList");
  var dispHTML = "<ul>";

  for (let i = 0; i < groceries.length; i++) {
    dispHTML += "<li>" + groceries[i] + "</li>";
  }

  dispHTML += "</ul>";
  dispElement.innerHTML = dispHTML;
}

当我写这篇文章时，我注意到用于编辑杂货数组的辅助方法似乎实际上并未向数组添加任何内容。您需要从表单元素获取您尝试推送的值（例如），然后将其作为参数传递给推送函数......

function listAdd() {
  let addValElement = window.document.getElementById("listAddVal");
  let addVal = addValElement.value;

  if (addVal.length > 0) {
    groceries.push(addVal);
    addValElement.value = ""; //clear the input since we already added it
    window.alert("added item [" + addVal + "] to the grocery list");
  }

}