Question

我正在尝试制作一个基本的应用程序。

这是我到目前为止所做的；

当用户单击按钮时，出现提示，要求用户输入任务。
任务将存储在数组中
我已经在控制台中显示了该阵列。但是，我无法在网页上显示数组：

var toDoItems = [];
var parsed = "";

document.getElementById("addItem").onclick = function() {
  var userInput = prompt("Enter your Todo: ")
  toDoItems.push = userInput;
  console.log(toDoItems);
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel="stylesheet" type="text/css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <title>To Do List</title>
</head>

<body>
  <h1>My Tasks</h1>
  <button id="addItem">Add item</button>
  <div id="item-list">
  </div>
  <script src="js/script.js"></script>
</body>

</html>

Answer 1

第一件事是您需要使用Array.push()而不是Array.push = someVal。然后，您可以遍历值并在HTML中创建元素列表：

var toDoItems = [];
var parsed = "";

document.getElementById("addItem").onclick = function() {
  var nHTML = '';
  var userInput = prompt("Enter your Todo: ")

  toDoItems.push(userInput);
  toDoItems.forEach(function(item) {
    nHTML += '<li>' + item + '</li>';
  });

  document.getElementById("item-list").innerHTML = '<ul>' + nHTML + '</ul>'
}

<head>
  <link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel="stylesheet" type="text/css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <title>To Do List</title>
</head>

<body>
  <h1>My Tasks</h1>
  <button id="addItem">Add item</button>
  <div id="item-list">
  </div>
  <script src="js/script.js"></script>
</body>

Answer 2

环顾_Bool，创建一个toDoItems标签并将其附加到<p>：

#item-list

Answer 3

您可以为此使用innerHTML

document.getElementById("item-list").innerHTML += "<p>" +userInput+"</p>";

演示：plunker

Answer 4

在下面检查，我认为这可能对您有帮助
为了方便起见，我从您的代码中删除了样式

<html>
    <head>
        <link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic' rel="stylesheet" type="text/css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <title>To Do List</title>
        <script>
        function myFunction(){
        var toDoItems = [];
         var parsed ="";
        var userInput = prompt("Enter your Todo: ")
        toDoItems.push = userInput;
        document.getElementById("item-list").innerHTML=userInput;
        console.log(toDoItems);
    }
        </script>
    </head>
    <body>
        <h1>My Tasks</h1>
        <button id="addItem" onclick="myFunction()">Add item</button>
        <div id="item-list">
        </div>
    </body>
    </html>

Answer 5

您可以使用 map（）映射到toDoItems并将每个项目转换为html代码，然后使用 joint（）将数组合并为一个HTML字符串代码。

像这样：

const HTML = toDoItems.map( item => `<li>${item}</li> ` ).joint('');
document.getElementById("item-list").innerHTML = '<ul>' + HTML + '</ul>'

在div中显示JavaScript数组

5 个答案: