css 在div中显示javascript数组

agxfikkp 于 2022-11-26 发布在 Java

关注(0)|答案(6)|浏览(160)

我正在尝试做一个基本的应用程序。
以下是我迄今为止所做的;

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

第一个

css

来源：https://stackoverflow.com/questions/51766879/display-javascript-array-in-div

6条答案

按热度按时间

lztngnrs1#

首先需要使用Array.push()而不是Array.push = someVal，然后循环到这些值并在HTML中创建一个元素列表：
第一个

赞(0）回复(0）举报 2022-11-26

thtygnil2#

您可以使用**map（）来MaptoDoItems，并将每个项目转换为html代码，然后使用join（）**将数组合并为一个HTML代码字符串。
就像这样：

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

编辑：修复了排印错误（应为连接，而非接头）

赞(0）回复(0）举报 2022-11-26

vx6bjr1n3#

循环toDoItems，创建一个<p>标记并将其附加到#item-list：

toDoItems.forEach((item) => {
    let p = document.createElement('p');
    p.innerText = item;
    document.querySelector('#item-list').appendChild(p); 
});

赞(0）回复(0）举报 2022-11-26

v9tzhpje4#

您可以使用innerHTML执行此操作

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

演示：plunker

赞(0）回复(0）举报 2022-11-26

xdnvmnnf5#

请检查以下内容，我认为这可能对您有所帮助
为了方便起见，我从代码中删除了样式

<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>

赞(0）回复(0）举报 2022-11-26

fkvaft9z6#

上述代码有一个缺点：当您在prompt（）中输入新值时，它会清除userInput的旧值。“项目列表”中的所有项目都是相同的。
“; Vu

赞(0）回复(0）举报 2022-11-26