RandomDeveloper
Reputation: 873
Get object value and add them to HTML Div
I have a taskObject that includes values such as title of my task.
I would like to add the title of that task to the HTML Div but can't seem to find a way of getting the title on the tasksManager.add.title in order to obtain the value. The front-end result would be user to see which task they are doing on a certain day every time they log in the app.
Here's my code
//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>Upvotes: 0
Views: 74
Answers (1)
mplungjan
Reputation: 178126
You need to move the append to inside the click AFTER the creation of the 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>Upvotes: 1
Related Questions
- Appending JS obj values into a div
- How can I append a string to a div by referencing an object key?
- Retrieving div "value" to javascript
- I am trying to populate a div with an object
- javascript write object value to div
- how to get value of inner html objects of a div
- Dynamically add object value to div inside <p> tag
- How do I get the property values from an object appended to a div?
- Javascript Add data to div
- how to add an object in a div