I am doing an assignment and I'm creating a task manager. I've got the adding a new task working, however I am having trouble reversing that once you click on a checkbox the opposite happens. I'm pretty sure it almost works, there's probably just a couple lines that need tweaking.
Here is all my HTML and JS/jQuery code for context:
HTML:
<div>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
</head>
<div id="sidebar">
<h2>Overall Status</h2>
<div class="sb" id="schl.stat">
<h3>School -</h3>
<input type="submit" id="schl.bttn" value="0">
</div>
<div class="sb">
<h3>Work -</h3>
<input type="submit" id="wrk.bttn" value="0">
</div>
<div class="sb">
<h3>Weekend -</h3>
<input type="submit" id="wknd.bttn" value="0">
</div>
<div class="sb">
<h3>Other -</h3>
<input type="submit" id="othr.bttn" value="0">
</div>
</div>
<div id="tasks">
<div id="newtask">
<h2>Add New Task</h2>
<div id="IDK">
<div id="idk">
<label for="options">Options*</label>
<select id="options">
<option hidden disabled selected value>------------------------------------------</option>
<option value="School">School</option>
<option value="Work">Work</option>
<option value="Weekend">Weekend</option>
<option value="Other">Other</option>
</select>
</div>
<div id="idk2">
<label for="date">Completion Date</label>
<input type="date" id="date">
</div>
</div>
<label for="tdesc">Description*</label>
<input type="text" id="tdesc" size="75">
<input type="submit" id="add" value="Add">
<div id="req"><strong>* Required fields</strong></div>
</div>
<div id="current">
<h2>Current Tasks</h2>
<div id="schlwrk">
<div id="schl">
<h4>School</h4>
<br>
</div>
<div id="wrk">
<h4>Work</h4>
<br>
</div>
</div>
<div id="wkndothr">
<div id="wknd">
<h4>Weekend</h4>
<br>
</div>
<div id="othr">
<h4>Other</h4>
<br>
</div>
</div>
</div>
</div>
</div>
JS/jQuery:
var a = 0;
var b = 0;
var c = 0;
var d = 0;
function addTask() {
var newTask = $("#tdesc").val();
var newTask2 = $("#date").val();
if ($("#options").val() == "" || $("#tdesc").val() == "") {
alert("You have not completed all required fields.");
} else if ($("#options").val() == "School") {
$("#schl").append("<input type='checkbox'" +
"name='checkbox'" +
"class='checkbox1'" +
"value=" +
newTask +
newTask2 +
"'>" +
newTask +
newTask2 +
"<br>");
document.getElementById("schl.bttn").value = ++a;
} else if ($("#options").val() == "Work") {
$("#wrk").append("<input type='checkbox'" +
"name='checkbox'" +
"class='checkbox2'" +
"value=" +
newTask +
newTask2 +
"'>" +
newTask +
newTask2 +
"<br>");
document.getElementById("wrk.bttn").value = ++b;
} else if ($("#options").val() == "Weekend") {
$("#wknd").append("<input type='checkbox'" +
"name='checkbox'" +
"class='checkbox3'" +
"value=" +
newTask +
newTask2 +
"'>" +
newTask +
newTask2 +
"<br>");
document.getElementById("wknd.bttn").value = ++c;
} else {
$("#othr").append("<input type='checkbox'" +
"name='checkbox'" +
"class='checkbox4'" +
"value=" +
newTask +
newTask2 +
"'>" +
newTask +
newTask2 +
"<br>");
document.getElementById("othr.bttn").value = ++d;
}
$("#tdesc").val("");
$("#date").val("");
}
$(document).ready(function() {
$("#add").on("click", function() {
addTask();
});
});
**var checkBox1 = $(".checkbox1");
var checkBox2 = $(".checkbox2");
var checkBox3 = $(".checkbox3");
var checkBox4 = $(".checkbox4");
function deleteTask() {
if (checkBox1.is(":checked")) {
$("schl").remove("<input type='checkbox'" +
"name='checkbox'" +
"class='checkbox1'" +
"value=" +
newTask +
newTask2 +
"'>" +
newTask +
newTask2 +
"<br>");
document.getElementById("schl.bttn").value = --a;
} else if (checkBox2.is(":checked")) {
$("wrk").remove("<input type='checkbox'" +
"name='checkbox'" +
"class='checkbox2'" +
"value=" +
newTask +
newTask2 +
"'>" +
newTask +
newTask2 +
"<br>");
document.getElementById("wrk.bttn").value = --b;
} else if (checkBox3.is(":checked")) {
$("wknd").remove("<input type='checkbox'" +
"name='checkbox'" +
"class='checkbox3'" +
"value=" +
newTask +
newTask2 +
"'>" +
newTask +
newTask2 +
"<br>");
document.getElementById("wknd.bttn").value = --c;
} else {
$("othr").remove("<input type='checkbox'" +
"name='checkbox'" +
"class='checkbox4'" +
"value=" +
newTask +
newTask2 +
"'>" +
newTask +
newTask2 +
"<br>");
document.getElementById("othr.bttn").value = --d;
}
}
$(document).ready(function() {
$(":checkbox").on("click", function() {
deleteTask();
});
});**
Any help would be greatly appreciated :) Thanks
Aucun commentaire:
Enregistrer un commentaire