Question

我有一个对象，在那个对象中有这个数组：

[
  {
    "title": "Title1",
    "status": false
  },
  {
    "title": "Title2",
    "status": false
  }
]

，当我按下a标签时，我想将元素的状态从false更改为true，并将其从“任务”部分移至“完成”部分。像this。

但是在changeStatus函数中，我得到了错误：

未捕获的TypeError：无法设置未定义的属性“状态”
  在changeStatus（script.js：116）
  在HTMLAnchorElement.onclick（？new-task = Task1：1）

如何在点击时更改元素的状态？

var tasks = {};
var element = {};
var tasksList;
var index;
Date.shortMonths = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

function short_months(dt) {
  return Date.shortMonths[dt.getMonth()];
}

function taskList() {
  var today = new Date();
  var full_date = short_months(today) + " " + today.getDate() + " " + today.getYear();
  element["title"] = document.getElementById('new-task').value;
  element["status"] = false;
  element["date"] = full_date;

  var oldItems = JSON.parse(localStorage.getItem('tasksAll')) || [];
  oldItems.push(element);
  localStorage.setItem('tasksAll', JSON.stringify(oldItems));
  updateData();
}

function updateData() {
  var retrievedData = localStorage.getItem("tasksAll");
  tasksList = JSON.parse(retrievedData);
  var htmlNotDone = "";
  var htmlDone = "";
  var falseCount = 0;
  for (index = 0; index < tasksList.length; index++) {
    if (tasksList[index].status === false) {
      falseCount++;
      htmlNotDone += '<div class="task-element">';
      htmlNotDone += '<div class="task-left-element"><p>' + tasksList[index].date + '</p><h4>' + tasksList[index].title + tasksList[index].status + '</h4></div>';
      htmlNotDone += '<div class="task-right-element">';
      htmlNotDone += '<a href="javascript:void(0);" onclick="changeStatus(index);"><span class="checkmark"><div class="checkmark_stem"></div><div class="checkmark_kick"></div></span></a>';
      htmlNotDone += '</div>';
      htmlNotDone += '</div>';
    } else {
      htmlDone = htmlDone + tasksList[index].title;
    }
  }
  if (htmlNotDone === "") {
    document.getElementById("task-list").innerHTML = "Nothing";
  } else {
    document.getElementById("task-list").innerHTML = htmlNotDone;
  }
  if (htmlDone === "") {
    document.getElementById("done-task-count").innerHTML = "Nothing";
  } else {
    document.getElementById("done-task-count").innerHTML = htmlDone;
  }
}

function changeStatus(index) {
  tasksList[index].status = true;
}
updateData();

@font-face {
  font-family: font-Heavy;
  src: url(fonts/Aileron-Heavy.otf);
}

@font-face {
  font-family: font-Bold;
  src: url(fonts/Aileron-Bold.otf);
}

@font-face {
  font-family: font-Light;
  src: url(fonts/Aileron-Light.otf);
}

@font-face {
  font-family: font-Regular;
  src: url(fonts/Aileron-Regular.otf);
}

body {
  background-color: #e5e5e5;
}

.container {
  position: fixed;
  left: 40%;
  top: 10%;
  transform: translate(-40%, -10%);
  width: 80%;
  background-color: #f7f9fa;
}

.container .content {
  margin-left: 25%;
  margin-right: 25%;
}

.container .content h1 {
  font-family: font-Heavy;
  color: #2f80ed;
}

.content form input[type=text] {
  font-family: font-Regular;
  padding-left: 15px;
  min-height: 60px;
  width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 3px;
  box-shadow: inset 0px 0px 10px #e0e0e0;
}

::placeholder {
  color: #929292;
}

.content .undone-task h3,
.content .done-task h3 {
  font-family: font-Bold;
  color: #828282;
}

.content .task-element {
  border: 1px solid #e5e6e7;
  border-radius: 3px;
  box-shadow: 0px 10px 18px #e5e6e7;
  margin-bottom: 20px;
  min-height: 60px;
}

.task-element p {
  font-family: font-Light;
  color: #c5c5c5;
  margin-bottom: 0;
  font-size: 12px;
}

.task-element h4 {
  font-family: font-Light;
  color: #828282;
  margin-top: 0px;
  margin-bottom: 15px;
}

.task-element .task-left-element {
  float: left;
  margin-left: 15px;
}

.task-element .task-rigth-element {
  margin-right: 10px;
  float: right;
}

.checkmark {
  float: right;
  margin-right: 10px;
  margin-top: 3%;
  display: inline-block;
  width: 22px;
  height: 22px;
  -ms-transform: rotate(45deg);
  /* IE 9 */
  -webkit-transform: rotate(45deg);
  /* Chrome, Safari, Opera */
  transform: rotate(45deg);
}

.checkmark_stem {
  position: absolute;
  width: 3px;
  height: 9px;
  background-color: #ccc;
  left: 11px;
  top: 6px;
}

.checkmark_kick {
  position: absolute;
  width: 3px;
  height: 3px;
  background-color: #ccc;
  left: 8px;
  top: 12px;
}

.checkmark:hover .checkmark_stem,
.checkmark:hover .checkmark_kick {
  background-color: #6fcf97;
}

<div class="container">
  <div class="content">
    <h1>To-do</h1>
    <form name="taskForm" onsubmit="taskList();return false">
      <input type="text" name="new-task" id="new-task" placeholder="Task title">
      <input type="submit" style="visibility: hidden;" />
    </form>
    <div class="undone-task">
      <h3>Tasks</h3><span id="task-count"></span>
      <div id="task-list"></div>
    </div>
    <div class="done-task">
      <h3>Done</h3><span id="done-task-count"></span>
      <div id="done-task-list"></div>
    </div>
  </div>
</div>

Answer 1

首先......

您不应使用JavaScript生成HTML，而应使用DOM查询来添加/编辑DOM子级，为此，您应该学习如何使用jQuery或vue.js之类的库。

第二，您不应使用onclick html属性，而应使用事件监听器，它通常由库或框架处理。

第三，您使用index作为字符串，而不是变量，因此，它当然会尝试使用将在索引循环之后执行的全局变量index。因此，您应该了解词法范围和变量管理。

为了解决您的问题，请将onclick="changeStatus(index);"替换为onclick="changeStatus('+index+');"，它应该可以正常工作。

在localStorage中单击时js对象值更改

1 个答案: