Javascript Todolist 类别 if else 语句

Question

您好，我一直在想如何为我的待办事项列表添加类别。当您单击类别的按钮时需要更改类名。我不明白如何在单击按钮时正确编写 if/else 语句。

计划它需要如何工作

1. 写任务名称
2. 选择类别
3. 添加新任务

可能有人可以帮我解决这个问题，或者给出一些建议来解决这个问题!

抱歉我的英语不好，如果我的问题解释不好!

var toDoList = function() {

  var addNewTask = function() {
      var input = document.getElementById("taks-input").value,
        itemTexts = input,
        colA = document.getElementById('task-col-a').children.length,
        colB = document.getElementById('task-col-b').children.length,
        taskBoks = document.createElement("div"),
        work = document.getElementById("work"),
        Category = "color-2",
        taskCount = 1;

      if (work.onclick === true) {
        var Category = "color";
      }
      taskBoks.className = "min-box";
      taskBoks.innerHTML = '<div class="col-3 chack" id="task_' + (taskCount++) + '"><i class="fa fa-star"></i></div><div class="col-8 task-text" id="taskContent"><p>' + itemTexts + '</p><span id="time-now"></span></div><div class="col-1 ' + (Category) + '"></div>'

      if (colB < colA) {
        var todolist = document.getElementById("task-col-b");
      } else {
        var todolist = document.getElementById("task-col-a");
      }
      //todolist.appendChild(taskBoks);
      todolist.insertBefore(taskBoks, todolist.childNodes[0]);
    },
    addButton = function() {
      var btn2 = document.getElementById("add-task-box");
      btn2.onclick = addNewTask;

    };

  addButton()
}
toDoList();

p {
  padding: 20px 20px 20px 45px;
}
.chack {
  background-color: #4c4b62;
  height: 100%;
  width: 40px;
}
.task-text {
  background-color: #55566e;
  height: 100%;
  width: 255px;
}
.color {
  width: 5px;
  height: 100%;
  background-color: #fdcd63;
  float: right;
}
.color-2 {
  width: 5px;
  height: 100%;
  background-color: red;
  float: right;
}
.color-3 {
  width: 5px;
  height: 100%;
  background-color: purple;
  float: right;
}
.task {
  height: 100px;
  width: 300px;
  border: 1px solid #fff;
  float: left;
}
.chack,
.task-text {
  float: left;
}
.add-new-task {
  margin-bottom: 50px;
  height: 80px;
  width: 588px;
  background-color: rgb(85, 86, 110);
  padding-top: 30px;
  padding-left: 15px;
}
.min-box {
  height: 100px;
  border-bottom: 1px solid #fff;
}
.center {
  padding-top: 20px;
  padding-left: 50px;
}
.fa-star {
  padding-left: 14px;
  padding-top: 100%;
}
#add-task-box {
  float: right;
  margin-right: 10px;
  margin-top: -7px;
  border: none;
  background-color: rgb(255, 198, 94);
  padding: 10px;
}
#taks-input {
  height: 30px;
  width: 350px;
  margin-top: -7px;
}
.category {
  margin-top: 10px;
}

<div class="container">
  <div class="add-new-task">
    <input type="text" id="taks-input">
    <button id="add-task-box">Add New Task box</button>
    <div class="category">
      <button class="catBtn" id="work">Work</button>
      <button class="catBtn" id="home">Home</button>
      <button class="catBtn" id="other">Other</button>
    </div>
  </div>
  <div class="lg-task" id="bigTask"></div>
  <div class="task" id="task-col-a"></div>
  <div class="task" id="task-col-b"></div>
</div>

Answer 1

您需要将点击事件绑定(bind)到您的按钮并将该值存储在 Category 中，因此在您的 js 中添加此

var toDoList = function() {

  // set to default
  var Category = "color-3";
  // attach event to buttons
  var catButtons = document.getElementsByClassName("catBtn");

  // assign value based on event
  var myCatEventFunc = function() {
    var attribute = this.getAttribute("id");
    if (attribute === 'work') {
      Category = 'color';
    } else if (attribute === 'home') {
      Category = 'color-2';
    }
  };

  for (var i = 0; i < catButtons.length; i++) {
    catButtons[i].addEventListener('click', myCatEventFunc, false);
  }

Demo: Fiddle

并从 addNewTask 函数中删除这段代码

if (work.onclick === true) {
   var Category = "color";
}