javascript - 获取对象值并将它们添加到 HTML Div
问题描述
我有一个taskObject包含诸如我的任务标题之类的值。
我想将该任务的标题添加到 HTML Div，但似乎找不到获取标题tasksManager.add.title以获取值的方法。前端结果将是用户每次登录应用程序时查看他们在某一天正在执行的任务。
这是我的代码
//Task Manager//
var idCounter = 0
var tasksManager = {
array: [],
add: function(task, bracketStart, bracketEnd, date) {
taskObject = {
title: task,
idVerification: idCounter++,
startTask: bracketStart,
endTask: bracketEnd,
dateTask: date
}
tasksManager.array.push(taskObject)
},
show: function(id) {
var i;
for (i = 0; i < tasksManager.array.length; i++) {
if (id === tasksManager.array[i].idVerification) {
return tasksManager.array[i]
}
}
},
delete: function(task) {
if (this.show) {
tasksManager.array.splice(task)
}
}
}
// Calendar
var myDate = new Date(),
year = myDate.getFullYear(),
month = myDate.getMonth(),
day = myDate.getDay(),
date = myDate.getDate()
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
var dates = ["0", "1st", "2nd", "3rd", "4th", "5th", "1st", "1st", "1st", "1st", "1st", "1st", "1st", "1st"]
var dayElement = document.createElement('div')
dayElement.innerHTML = days[day] + "," + " " + dates[date] + " " + "of" + " " + months[month] + " " + year
document.getElementById("month-today").appendChild(dayElement)
function removeClass() {
document.getElementById('task-input').classList.toggle('new-task');
}
var button = document.getElementById("save-task");
var input = document.getElementById("add-new-task");
var startTime = document.getElementById("time-stamp");
var endTime = document.getElementById("time-stamp-finish");
var date = document.getElementById("event-date")
// -- - THIS IS MY ATTEMPT TO ADD THE OBJECT TITLE TO DIV-- -
var taskEvent = document.createElement('div')
taskEvent.innerHTML = tasksManager.array.add.title
document.getElementById("event-1").appendChild(taskEvent)
button.addEventListener('click', () => {
tasksManager.add(input.value, startTime.value, endTime.value, date.value);
console.log(tasksManager.array)
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ProdPlus </title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Tomorrow&display=swap" rel="stylesheet">
</head>
<body>
<h1>ProdPlus+ </h1>
<div class="dropdown-menu">
</div>
<div id="month-today"></div>
<div id="day-today"></div>
<div id="date-today"></div>
<button class="add-task" onclick="removeClass()">Add task</button>
<div class="new-task" id="task-input">
<div>Task: <input id="add-new-task" type="text"></div>
<div id="add-time">
<label>Time</label>
<select id="time-stamp">
<option value="08:00">08:00</option>
<option value="09:00">09:00</option>
<option value="10:00">10:00</option>
<option value="11:00">11:00</option>
</select>
-
<select id="time-stamp-finish">
<option value="09:00">09:00</option>
<option value="10:00">10:00</option>
<option value="11:00">11:00</option>
<option value="12:00">12:00</option>
</select>
</div>
<div id="date-stamp">
Date:
<input type="date" id="event-date" name="bday" max="2030-12-31"><br>
</div>
<button class="save-task" id="save-task" onclick="">Save task</button>
</div>
<div class="calendar">
<!-- <div class="month-indicator">
<div>January</div>
<div>February</div>
<div>March</div>
<div>April</div>
<div>June</div>
<div>July</div>
<div>August</div>
<div>September</div>
<div>October</div>
<div>November</div>
<div>December</div>
</div> -->
<div class="day-of-week">
<div class="day">Sunday</div>
<div class="day">Monday</div>
<div class="day">Tuesday</div>
<div class="day">Wednesday</div>
<div class="day">Thursday</div>
<div class="day">Friday</div>
<div class="day">Saturday</div>
</div>
<div class="hours">
<div>04:00</div>
<div>05:00</div>
<div>06:00</div>
<div>07:00</div>
<div>08:00</div>
<div>09:00</div>
<div>10:00</div>
<div>11:00</div>
<div>12:00</div>
<div>13:00</div>
<div>14:00</div>
<div>15:00</div>
<div>16:00</div>
<div>17:00</div>
<div>18:00</div>
<div>19:00</div>
<div>20:00</div>
<div>21:00</div>
<div>22:00</div>
<div>23:00</div>
<div>00:00</div>
<div>01:00</div>
<div>02:00</div>
<div>03:00</div>
</div>
<div class="grid-container">
<div class="events">
<div class="event" id="event-1"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
</div>
</div>
<div id="dates">
</div>
<script src="script.js"></script>
</body>
</html>解决方案
在创建 taskEvent 之后，您需要将附加移动到单击内部
//Task Manager//
var idCounter = 0
var tasksManager = {
array: [],
add: function(task, bracketStart, bracketEnd, date) {
taskObject = {
title: task,
idVerification: idCounter++,
startTask: bracketStart,
endTask: bracketEnd,
dateTask: date
}
tasksManager.array.push(taskObject)
},
show: function(id) {
var i;
for (i = 0; i < tasksManager.array.length; i++) {
if (id === tasksManager.array[i].idVerification) {
return tasksManager.array[i]
}
}
},
delete: function(task) {
if (this.show) {
tasksManager.array.splice(task)
}
}
}
// Calendar
var myDate = new Date(),
year = myDate.getFullYear(),
month = myDate.getMonth(),
day = myDate.getDay(),
date = myDate.getDate()
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
var dates = ["0", "1st", "2nd", "3rd", "4th", "5th", "1st", "1st", "1st", "1st", "1st", "1st", "1st", "1st"]
var dayElement = document.createElement('div')
dayElement.innerHTML = days[day] + "," + " " + dates[date] + " " + "of" + " " + months[month] + " " + year
document.getElementById("month-today").appendChild(dayElement)
function removeClass() {
document.getElementById('task-input').classList.toggle('new-task');
}
var button = document.getElementById("save-task");
button.addEventListener('click', () => {
var input = document.getElementById("add-new-task");
var startTime = document.getElementById("time-stamp");
var endTime = document.getElementById("time-stamp-finish");
var date = document.getElementById("event-date")
var taskEvent = document.createElement('div')
tasksManager.add(input.value, startTime.value, endTime.value, date.value);
//console.log(tasksManager.array)
taskEvent.innerHTML = tasksManager.array[tasksManager.array.length - 1].title
document.getElementById("event-1").appendChild(taskEvent)
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ProdPlus </title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Tomorrow&display=swap" rel="stylesheet">
</head>
<body>
<h1>ProdPlus+ </h1>
<div class="dropdown-menu">
</div>
<div id="month-today"></div>
<div id="day-today"></div>
<div id="date-today"></div>
<button class="add-task" onclick="removeClass()">Add task</button>
<div class="new-task" id="task-input">
<div>Task: <input id="add-new-task" type="text"></div>
<div id="add-time">
<label>Time</label>
<select id="time-stamp">
<option value="08:00">08:00</option>
<option value="09:00">09:00</option>
<option value="10:00">10:00</option>
<option value="11:00">11:00</option>
</select>
-
<select id="time-stamp-finish">
<option value="09:00">09:00</option>
<option value="10:00">10:00</option>
<option value="11:00">11:00</option>
<option value="12:00">12:00</option>
</select>
</div>
<div id="date-stamp">
Date:
<input type="date" id="event-date" name="bday" max="2030-12-31"><br>
</div>
<button class="save-task" id="save-task" onclick="">Save task</button>
</div>
<div class="calendar">
<!-- <div class="month-indicator">
<div>January</div>
<div>February</div>
<div>March</div>
<div>April</div>
<div>June</div>
<div>July</div>
<div>August</div>
<div>September</div>
<div>October</div>
<div>November</div>
<div>December</div>
</div> -->
<div class="day-of-week">
<div class="day">Sunday</div>
<div class="day">Monday</div>
<div class="day">Tuesday</div>
<div class="day">Wednesday</div>
<div class="day">Thursday</div>
<div class="day">Friday</div>
<div class="day">Saturday</div>
</div>
<div class="hours">
<div>04:00</div>
<div>05:00</div>
<div>06:00</div>
<div>07:00</div>
<div>08:00</div>
<div>09:00</div>
<div>10:00</div>
<div>11:00</div>
<div>12:00</div>
<div>13:00</div>
<div>14:00</div>
<div>15:00</div>
<div>16:00</div>
<div>17:00</div>
<div>18:00</div>
<div>19:00</div>
<div>20:00</div>
<div>21:00</div>
<div>22:00</div>
<div>23:00</div>
<div>00:00</div>
<div>01:00</div>
<div>02:00</div>
<div>03:00</div>
</div>
<div class="grid-container">
<div class="events">
<div class="event" id="event-1"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
<div class="event"></div>
</div>
</div>
<div id="dates">
</div>
<script src="script.js"></script>
</body>
</html>推荐阅读
- javascript - 根据传递给组件的 props 分配 styled-component CSS 属性
- web2py - 使用 os.path.join(...) 从私有 CSV 文件访问和导入数据
- c++ - Qt 图像不会显示在按钮中
- python - 如何从文件python3压缩大型ascii艺术
- spring-boot - TCP中的尤里卡服务器
- javascript - Typescript 1.8.5 的绝对类型库支持
- sql - Sybase LIST 函数在 256 个字符后截断结果
- vba - VBA Powerpoint中的数组图像控制循环
- sql - 如何在 VBA 中使用 SQL 将两个工作簿与一个公共列合并
- c# - 正则表达式匹配有效的十六进制字符串，但不全是 '0'