javascript - 获取对象值并将其添加到 HTML Div-6ren

javascript - 获取对象值并将其添加到 HTML Div

转载作者：行者123 更新时间：2023-12-02 22:22:49

我有一个 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>

最佳答案

创建任务事件后，您需要将附加移动到点击内部

//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 - 获取对象值并将其添加到 HTML Div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59171268/

文章推荐： mobile - Qooxdoo 手机 : multiple selection in form

文章推荐： c++11 - std::function 没有名为 'target' 的成员

文章推荐： sql - 如何在不聚合的情况下使长表变宽？

文章推荐： SQL累进和

java - 对象 a = 对象 b；对象 a 会发生什么？
我的一位教授给了我们一些考试练习题，其中一个问题类似于下面(伪代码): a.setColor(blue); b.setColor(red); a = b; b.setColor(purple); b
JavaScript 测试(对象 && 对象 !== "null"&& 对象 !== "undefined")
我似乎经常使用这个测试 if( object && object !== "null" && object !== "undefined" ){ doSomething(); } 在对象上，我
C#对象/对象
C# Object/object 是值类型还是引用类型？我检查过它们可以保留引用，但是这个引用不能用于更改对象。 using System; class MyClass { public s
javascript - 通过ajax发送json - 对象 - 对象
我在通过 AJAX 发送 json 时遇到问题。 var data = [{"name": "Will", "surname": "Smith", "age": "40"},{"name": "Wil
javascript - 如何获取值[对象][对象]
当我尝试访问我的 View 中的对象 {{result}} 时(我从 Express js 服务器发送该对象)，它只显示 [object][object]有谁知道如何获取 JSON 格式的值吗？这是
java - 对象...对象[] 和格式
我有不同类型的数据(可能是字符串、整数......)。这是一个简单的例子: public static void main(String[] args) { before("one"); }
javascript - 如何修复[对象，对象]
嗨，我是 json 和 javascript 的新手。我在这个网站找到了使用json数据作为表格的方法。我很好奇为什么当我尝试使用 json 数据作为表时，我得到 [Object,Object]
JavaScript [对象][对象] 调试
已关闭。此问题需要 debugging details 。目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and the
java - 对象==空或空==对象？
我听别人说 null == object 比 object == null check 例如: void m1(Object obj ) { if(null == obj) // Is thi
VBS教程：对象-Match 对象
Match 对象提供了对正则表达式匹配的只读属性的访问。说明 Match 对象只能通过 RegExp 对象的 Execute 方法来创建，该方法实际上返回了 Match 对象的集合。所有的
VBS教程：对象-Class 对象
Class 对象使用 Class 语句创建的对象。提供了对类的各种事件的访问。说明不允许显式地将一个变量声明为 Class 类型。在 VBScript 的上下文中，“类对象”一词指的是用
VBS教程：对象-Folder 对象
Folder 对象提供对文件夹所有属性的访问。说明以下代码举例说明如何获得 Folder 对象并查看它的属性： Function ShowDateCreated(f
VBS教程：对象-File 对象
File 对象提供对文件的所有属性的访问。说明以下代码举例说明如何获得一个 File 对象并查看它的属性： Function ShowDateCreated(fil
VBS教程：对象-Drive 对象
Drive 对象提供对磁盘驱动器或网络共享的属性的访问。说明以下代码举例说明如何使用 Drive 对象访问驱动器的属性： Function ShowFreeSpac
VBS教程：对象-FileSystemObject 对象
FileSystemObject 对象提供对计算机文件系统的访问。说明以下代码举例说明如何使用 FileSystemObject 对象返回一个 TextStream 对象，此对象可以被读
对象
我是 javascript OOP 的新手，我认为这是一个相对基本的问题，但我无法通过搜索网络找到任何帮助。我是否遗漏了什么，或者我只是以错误的方式解决了这个问题？这是我的示例代码: functio
对象
我可以很容易地创造出很多不同的对象。例如像这样: var myObject = { myFunction: function () { return ""; } };
对象
function Person(fname, lname) { this.fname = fname, this.lname = lname, this.getName = function()
javascript - JSON 返回(对象，对象)
任何人都可以向我解释为什么下面的代码给出 (object, Object) 吗？ (console.log(dope) 给出了它应该的内容，但在 JSON.stringify 和 JSON.parse
javascript - 返回 [对象，对象] 的工具提示
我正在尝试完成散点图 exercise来自免费代码营。然而，我现在只自己学习了 d3 几个小时，在遵循 lynda.com 的教程后，我一直在尝试确定如何在工具提示中显示特定数据。 This code

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 获取对象值并将其添加到 HTML Div