Ad

Javascript Todolist Category If Else Statement

- 1 answer

Hello I'm stuck on how to add category for my to do list. When you click on Button of category need change class name. I don't understand how to correctly write if/else statement when button is clicked.

plan how it need to work

  1. Write task name
  2. Choose Category
  3. Add new task

May be somebody can help me out ore give some advice how to solve this problem!

Sorry for my english and if my question is to badly explained!

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>

Ad

Answer

you need to bind click event to your buttons and store that value in Category, so in you js add this

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

and remove this code from addNewTask function

if (work.onclick === true) {
   var Category = "color";
}
Ad
source: stackoverflow.com
Ad