在div中显示javascript数组_Javascript_Html_Css_Arrays

在div中显示javascript数组

javascript html css arrays

在div中显示javascript数组,javascript,html,css,arrays,Javascript,Html,Css,Arrays,我正在尝试做一个基本的应用程序以下是我迄今为止所做的工作当用户单击按钮时，会出现提示，要求用户输入任务然后，任务将存储在一个数组中我已经在控制台中显示了阵列。但是，我在网页上显示阵列时遇到问题： var toDoItems=[]； var解析=”； document.getElementById（“addItem”）.onclick=function（）{ var userInput=prompt（“输入您的Todo:”） toDoItems.push=用户输入； console.

我正在尝试做一个基本的应用程序

以下是我迄今为止所做的工作

当用户单击按钮时，会出现提示，要求用户输入任务
然后，任务将存储在一个数组中
我已经在控制台中显示了阵列。但是，我在网页上显示阵列时遇到问题：

var toDoItems=[]；
var解析=”；
document.getElementById（“addItem”）.onclick=function（）{
var userInput=prompt（“输入您的Todo:”）
toDoItems.push=用户输入；
console.log（toDoItems）；
}


待办事项清单
我的任务
添加项

循环

到doitems

，创建一个

标记并将其附加到#项目列表中
：
toDoItems.forEach((item) => {
    let p = document.createElement('p');
    p.innerText = item;
    document.querySelector('#item-list').appendChild(p); 
});

在toDoItems
上循环，创建一个
标记并将其附加到#项目列表中：
toDoItems.forEach((item) => {
    let p = document.createElement('p');
    p.innerText = item;
    document.querySelector('#item-list').appendChild(p); 
});

首先，您需要使用Array.push（）
而不是Array.push=someVal
。然后可以循环到这些值，并在HTML中创建元素列表：

var toDoItems=[]；
var解析=”；
document.getElementById（“addItem”）.onclick=function（）{
var-nHTML=''；
var userInput=prompt（“输入您的Todo:”）
toDoItems.push（用户输入）；
toDoItems.forEach（功能（项）{
nHTML+=''+项目+''；
});
document.getElementById（“项目列表”）.innerHTML=''+nHTML+''
}

待办事项清单
我的任务
添加项
首先需要使用Array.push（）
而不是Array.push=someVal
。然后可以循环到这些值，并在HTML中创建元素列表：

var toDoItems=[]；
var解析=”；
document.getElementById（“addItem”）.onclick=function（）{
var-nHTML=''；
var userInput=prompt（“输入您的Todo:”）
toDoItems.push（用户输入）；
toDoItems.forEach（功能（项）{
nHTML+=''+项目+''；
});
document.getElementById（“项目列表”）.innerHTML=''+nHTML+''
}

待办事项清单
我的任务
添加项
您可以使用innerHTML
进行此操作
document.getElementById("item-list").innerHTML += "<p>" +userInput+"</p>";

document.getElementById（“项目列表”）.innerHTML+=“”+userInput+””；

演示：
您可以为此使用innerHTML

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

document.getElementById（“项目列表”）.innerHTML+=“”+userInput+””；

演示：
检查下面的内容，我认为这可能会对您有所帮助

为了方便起见，我从代码中删除了样式
<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>


待办事项清单
函数myFunction（）{
var toDoItems=[]；
var解析=”；
var userInput=prompt（“输入您的Todo:”）
toDoItems.push=用户输入；
document.getElementById（“项目列表”）.innerHTML=userInput；
console.log（toDoItems）；
}
我的任务
添加项
检查下面的内容，我认为这可能会对您有所帮助

为了方便起见，我从代码中删除了样式
<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>


待办事项清单
函数myFunction（）{
var toDoItems=[]；
var解析=”；
var userInput=prompt（“输入您的Todo:”）
toDoItems.push=用户输入；
document.getElementById（“项目列表”）.innerHTML=userInput；
console.log（toDoItems）；
}
我的任务
添加项
您可以使用map（）映射toDoItems并将每个项目转换为html代码，然后使用join（）将数组合并为一个html代码字符串
像这样：
const HTML = toDoItems.map( item => `<li>${item}</li> ` ).join('');
document.getElementById("item-list").innerHTML = '<ul>' + HTML + '</ul>'

consthtml=toDoItems.map（item=>`${item}`）；
document.getElementById（“项目列表”）.innerHTML=''+HTML+''

编辑：修复了键入错误（应该是join，而不是joint）
您可以使用map（）映射toDoItems并将每个项目转换为html代码，然后使用join（）将数组合并为一个html代码字符串
像这样：
const HTML = toDoItems.map( item => `<li>${item}</li> ` ).join('');
document.getElementById("item-list").innerHTML = '<ul>' + HTML + '</ul>'

consthtml=toDoItems.map（item=>`${item}`）；
document.getElementById（“项目列表”）.innerHTML=''+HTML+''

编辑：修复了键入错误（应该是join，而不是joint）
您可以如下方式显示数组列表：$（“#项列表”）.html（toDoItems.toString（））；这将为您提供数组上该数组的逗号分隔值。在循环中，从todo项创建一个html元素。将创建的html插入页面。$（）
只有在他实际使用JQuery时才起作用，而这个问题没有标记为JQuery。他在头上包含了一个指向JQuery的链接，只是作为旁注：Array.push（）
是一个函数，所以你必须这样编写：toDoItems.push（userInput）可以如下方式显示数组列表：$（'#item list'）.html（toDoItems.toString（））；这将为您提供数组上该数组的逗号分隔值。在循环中，从todo项创建一个html元素。将创建的html插入页面。$（）
只有在他实际使用JQuery时才起作用，而这个问题没有标记为JQuery。他在头上包含了一个指向JQuery的链接，只是作为旁注：Array.push（）
是一个函数，所以你必须这样编写：toDoItems.push（userInput）+1以获得易于阅读的答案。另外，如果您不知道：代码段有一个内置的自动格式化按钮：@FabianN。你说得对。我不知道：）。ThanksIt花了一个多星期的时间审查编辑建议和第一篇帖子，直到我开始怀疑人们（不仅仅是新用户）只是不知道这个按钮或者更好，他们不知道它是自动格式化代码按钮。。。所以我拍了一张照片。。。但是你是第一个证实我怀疑的人，因为你的答案很容易理解。另外，如果您不知道：代码段有一个