在div中显示javascript数组
[英]Display javascript array in div
问题描述
I am trying to make a basic to do application.
我正在尝试制作一个基本的应用程序。
Here is what I have done so far;这是我到目前为止所做的；
When the user clicks a button a prompt appears asking the user to enter a task.
当用户单击按钮时，会出现提示，要求用户输入任务。The task will then be stored in an array
然后任务将存储在一个数组中I have displayed the array in the console.
我已经在控制台中显示了数组。 However, I am having trouble displaying the array on the web page:但是，我无法在 web 页面上显示数组：
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>
6 个解决方案
解决方案1
2 2018-08-09 12:27:54
The first thing is you need to use Array.push() and not Array.push = someVal .第一件事是你需要使用Array.push()而不是Array.push = someVal 。 Then you can loop over to the values and create a list of elements in the HTML:然后你可以循环到这些值并在 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>
解决方案2
2 2018-08-09 14:46:08
You can use map() to map over the toDoItems and convert each items to html code and then use join() to combine the array into one string of HTML code.您可以使用map()映射 toDoItems 并将每个项目转换为 html 代码，然后使用join()将数组组合成一个 HTML 代码字符串。
Like this:像这样：
const HTML = toDoItems.map( item => `<li>${item}</li> ` ).join('');
document.getElementById("item-list").innerHTML = '<ul>' + HTML + '</ul>'
Edit: Fixed typo (should be join, not joint)编辑：修正错字（应该加入，而不是联合）
解决方案3
1 2018-08-09 12:26:31
Loop over toDoItems , create a <p> tag and append it to #item-list :循环toDoItems ，创建一个<p>标签并将其附加到#item-list ：
toDoItems.forEach((item) => {
let p = document.createElement('p');
p.innerText = item;
document.querySelector('#item-list').appendChild(p);
});
解决方案4
1 2018-08-09 12:29:20
解决方案5
0 2018-08-09 12:40:31
Check below I think this may help you检查下面我认为这可能对您有所帮助
I removed style from your code for my convenience为方便起见，我从您的代码中删除了样式
<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>
解决方案6
-1 2022-11-24 16:29:57
The Code above has an drawback: It erases the old value of userInput when you enter a new value in prompt().上面的代码有一个缺点：当您在 prompt() 中输入新值时，它会擦除 userInput 的旧值。 I propose: document.getElementById("item-list").innerHTML +=userInput+"我建议：document.getElementById("item-list").innerHTML +=userInput+"
"; Vu "; 武
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.