这个文件是一个简单的待办列表生成器。它以 JS 数组的 div 中显示的三个示例项目开始。 onclick 按钮一“推”出现提示，用户添加的任何内容都会添加到 JS 中的数组中。根据控制台，这工作正常。第二个按钮“shift”将第一项从列表中拉出(传统的待办事项列表样式)，因为用户一次只做一个项目。按下和 shift 按钮都运行相应的 JS 函数，这些函数完美地完成了工作。在控制台中，每次使用凋灵时都会更新数组。
我的问题:一旦通过按钮对数组“toDoList”进行了修改，我如何让 div 刷新数组“toDoListJoined”？？？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JavaScript To Do List</title>
</head>
<body id="home">
<button id="push" onclick="pushPrompt()">Add something to the end of your list</button>
<button id="shift" onclick="shiftIt()">Remove the first item from your list</button>
<p id="listPlace">
<!--Here's where the magic happens-->
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
let toDoList = ["sample item 1", "sample item 2", "sample item 3"];
let toDoListJoined = toDoList.join("<br>");
let addItem = "";
document.getElementById("listPlace").innerHTML = toDoListJoined;
function pushPrompt() {
addItem = prompt("What is the item you want to add to your list?", "Sample item");
toDoList.push(addItem);
}
function shiftIt() {
toDoList.shift();
}
</script>
</body>
</html>
最佳答案
您可以创建一个新方法来更新 html:
//create a new method on the Array to push the item and update the HTML.
toDoList.pushAndUpdate= function(item) {
//push the item into the array using the prototype push method.
Array.prototype.push.call(this, item);
//update the html of my element.
document.getElementById("listPlace").innerHTML= this.join("<br>");
}
关于javascript - 在将项目推送到 HTML 元素后，我们如何刷新显示在 HTML 元素中的数组？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47320043/