Javascript Todolist類如果其他語句

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

你需要點擊事件綁定到你的按鈕和值存儲在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"; 
} 

Answer 2

這是一個有點很難理解你在做什麼，你要去的（某種形式的模塊？）。你不是那遠離工作狀態。

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>Task</title> 
<style> 

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; 
} 

</style> 
<script> 
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) { 
     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]); 
    }, 
    // I don't know what to do with that? 
    addButton = function() { 
     var btn2 = document.getElementById("add-task-box"); 
     btn2.onclick = addNewTask(); 
    }; 
    // return the stuff you want to have public 
    return { 
      addNewTask:addNewTask 
      }; 
} 
var f; 
// wait until all HTML is loaded and put the stuff from above into the variable `f` 
// you can call it with f.someFunction() in your case f.addNewTask() 
window.onload = function(){ 
    f = toDoList(); 
} 

</script> 
</head> 
<body> 
<div class="container"> 
    <div class="add-new-task"> 
    <input type="text" id="taks-input"> 
    <button id="add-task-box" onclick="f.addNewTask()">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> 
</body> 
</html 

我希望你明白我做了什麼？