I am trying to remove items from my local storage. I m pretty new at this, and I m confused about what to do. Tried different things but nothing worked.
So this is my HTML:
Inside ul, I am creating a ToDo list.
My JS file creates elements inside UL. After each input, the item is saved to local storage.
I have two problems: My items are not adding up to my To-DO list, and can not delete items from local storage after I press the delete button on the span.
<div id="myDiv" class="header">
<h2>My To Do List</h2>
<input type="text" name="text" id="myInput" placeholder="Title...">
<span onclick="newElement()" class="addBtn">Add</span>
</div>
<ul id="myUl"></ul>
<script>
var myNodelist = document.getElementsByTagName("Li");
var i;
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.addEventListener("click", removeFromLocalStorage);
span.appendChild(txt);
myNodelist[i].appendChild(span);
console.log(span);
}
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function () {
var div = this.parentElement;
div.style.display = "none";
};
}
var list = document.querySelector("ul");
list.addEventListener(
"click",
function (ev) {
if (ev.target.tagName === "LI") {
ev.target.classList.toggle("checked");
}
},
false
);
function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === "") {
alert("You must write something");
} else document.getElementById("myUl").appendChild(li);
inputValue.value = "";
saveToLocalStorage();
var span = document.createElement("span");
span.classList = "close";
var text = document.createTextNode("\u00D7");
span.appendChild(text);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function () {
var div = this.parentElement;
div.style.display = "none";
removeItem();
};
}
}
function saveToLocalStorage() {
var inputValue = document.getElementById("myInput").value;
window.localStorage.setItem("myInput", JSON.stringify(inputValue));
}
Not sure even what I suppose to do. If any explanation about my code would be appreciated.
Related
I'm trying to learn JavaScript and am trying to avoid tutorials and guides as much as I can but I'm stuck. I have a tasklist I'm working on. Currently, I can add a new task. Initially I had hard-coded a few starting tasks, Each task that's been hard-coded can be closed(hidden). When I add a new task to the list it is given a close button like the existing tasks, it has the same class as them as well, but will not close. I'm not sure what to do at this point since the new tasks looks like the existing as far as structure and class names but the JavaScript doesn't work on these newly added elements. Here's my code
html:
<div class="container">
<form class="form">
<h2>Tasks to do today: <span id="today"></span> </h2>
<div class="form-control">
<input type="text" id="addTask" placeholder="Add task">
<span onclick="addElement()" class="addBtn">Add</span>
<small>Error Message</small>
</div>
</form>
<ul class="taskList" id="taskList">
<li class="taskItem">item1</li>
<li class="taskItem">item2</li>
<li class="taskItem">item3</li>
<li class="taskItem">item4</li>
</ul>
</div>
JavaScript:
function addClose() {
const nodeList = document.getElementsByClassName("taskItem");
let i;
for (i = 0; i < nodeList.length; i++) {
const span = document.createElement("SPAN");
const txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
nodeList[i].appendChild(span);
}
}
function closeTask() {
const close = document.getElementsByClassName("close");
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
const div = this.parentElement;
div.style.display = "none";
}
}
}
function addElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("addTask").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
li.classList.add("taskItem")
if (inputValue === '') {
alert("You must write something!");
} else {
document.getElementById("taskList").appendChild(li);
}
document.getElementById("addTask").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}
// Run Functions
addClose();
closeTask();
Actually, I want to remove a specific checkbox div from at any time.
As trying to give a functionality that a user can add or remove a checkbox perfectly.
I wrote the code I try to add or rest the check box but when I try to remove the checkbox it does not work and I am not figuring out what is the problem.
Can someone fix it?
function uncheckAll2() {
var inputs = document.querySelectorAll('input[name="todo[]"]');
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = false;
}
}
function removeElement(elementId) {
// Removes an element from the document
var element = document.getElementById(elementId);
element.parentNode.removeChild(element);
}
function addItem() {
var ul = document.getElementById('ul'); //ul
var li = document.createElement('li');
var div = document.createElement('div'); //li
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.value = 1;
checkbox.name = "todo[]";
checkbox.className = "textt";
div.appendChild(checkbox);
var text = document.getElementById('texto');
div.appendChild(document.createTextNode(text.value));
li.appendChild(div);
ul.appendChild(li);
}
function addElement(elementId, html) {
// Adds an element to the document
newElement.setAttribute('id', elementId);
newElement.innerHTML = html;
}
var checkId = 0;
function addcheck() {
checkId++; // increment fileId to get a unique ID for the new element
var html = 'Remove';
addElement( checkId, html);
}
var button = document.getElementById('btn');
button.onclick = addItem , addcheck() ;
<body>
<h1>Add or remove element</h1>
<hr>
<br>
<ul id="ul">
</ul>
</div>
<button type="button" id="btn" onclick="addItems , addFile() ">Add More</button>
<input type="text" id="texto">
<input type="button" onclick="uncheckAll2()" class="btn btn-link" value="Reset">
here is the working code ok Eddie ?
function uncheckAll2() {
var inputs = document.querySelectorAll('input[name="todo[]"]');
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = false;
}
}
function removeElement(linkElement) {
// Removes an element from the document
var element = linkElement.parentNode.parentNode;//to get to the li element
element.parentNode.removeChild(element);
}
function addItem() {
var ul = document.getElementById('ul'); //ul
var li = document.createElement('li');
var div = document.createElement('div'); //li
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.value = 1;
checkbox.name = "todo[]";
checkbox.className = "textt";
div.appendChild(checkbox);
var text = document.getElementById('texto');
div.appendChild(document.createTextNode(text.value));
addcheck(div)
li.appendChild(div);
ul.appendChild(li);
}
function addElement(div,elementId, html) {
// Adds an element to the document
div.setAttribute('id', elementId);
div.innerHTML += html;
}
var checkId = 0;
function addcheck(div) {
checkId++; // increment fileId to get a unique ID for the new element
var html = '<a class="link" href="" onclick="javascript:removeElement( this ); return false;">Remove</a>';
addElement( div, checkId, html);
}
var button = document.getElementById('btn');
button.onclick = addItem ;
add this css for just readability but i think you will add more to the css
<style>
.link{
padding-left: 10px;
}
</style>
There is a way to do it with a single function:
<body>
<h1>Add or remove element</h1>
<hr>
<br>
<div>
<ul id="ul">
</ul>
</div>
<button type="button" id="btn" onclick="addItem()">Add More</button>
<input type="text" id="texto">
<input type="button" onclick="uncheckAll2()" class="btn btn-link" value="Reset">
</body>
</html>
<script type="text/javascript">
function uncheckAll2() {
var inputs = document.querySelectorAll('input[name="todo[]"]');
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = false;
}
}
var checkId = 0;
function addItem() {
var ul = document.getElementById('ul'); //ul
var li = document.createElement('li');
var div = document.createElement('div'); //li
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.value = 1;
checkbox.name = "todo[]";
checkbox.className = "textt";
li.id = checkId;
removeLink = 'Remove';
checkId++;
div.appendChild(checkbox);
var text = document.getElementById('texto');
div.appendChild(document.createTextNode(text.value));
div.innerHTML+=removeLink;
li.appendChild(div);
ul.appendChild(li);
}
</script>
I have made a to do list using vanilla JS , each list item has a delete and an edit option , delete works fine, but when I am editing a list item it is not editing the line item on which i use the edit option rather it updates the last added list item
HTML:
<div id="wrapper">
<div id="inputWrapper">
<input type="text" name="" id="listDetail"
placeholder="What's the task about" autofocus>
<button id="addBtn">Add</button>
</div>
<ul id="ul"></ul>
JS:
var listDetail = document.getElementById("listDetail");
var addBtn = document.getElementById("addBtn");
var ul = document.getElementById("ul");
addBtn.onclick = function () {
if (listDetail.value !== "") {
var li = document.createElement("LI");
ul.appendChild(li);
}
else {
alert("List item cannot be empty");
}
var entry = document.createElement("SPAN");
var entryText = document.createTextNode(listDetail.value);
entry.className = "userEntry";
entry.appendChild(entryText);
li.appendChild(entry);
var span = document.createElement("SPAN");
var spanText = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(spanText);
li.appendChild(span);
var close = document.getElementsByClassName("close");
for (var i = 0; i < close.length; i++) {
close[i].onclick = function () {
this.parentElement.style.display = "none";
}
}
var edit = document.createElement("SPAN");
var eText = document.createTextNode("\u270E");
edit.className = "edit";
edit.appendChild(eText);
li.appendChild(edit);
var editC = document.getElementsByClassName("edit");
for (var e = 0; e < editC.length; e++) {
editC[e].onclick = function () {
var p = prompt("Edit your entry");
entry.innerText = p;
}
}
var liTag = document.getElementsByTagName("LI");
for (var j = 0; j < liTag.length; j++) {
liTag[j].onclick = function () {
this.classList.toggle("checked");
}
}
listDetail.value = "";
}
How do I ensure it updates the right line item?
Here lies your problem:
var entry = document.createElement("SPAN"); // <<<
...
for (var e = 0; e < editC.length; e++) {
editC[e].onclick = function () {
var p = prompt("Edit your entry");
entry.innerText = p; // <<< you are modifying the entry that you've just created
}
}
I don't see a need for a for loop.
var listDetail = document.getElementById("listDetail");
var addBtn = document.getElementById("addBtn");
var ul = document.getElementById("ul");
addBtn.onclick = function () {
if (listDetail.value !== "") {
var li = document.createElement("LI");
ul.appendChild(li);
}
else {
alert("List item cannot be empty");
}
var entry = document.createElement("SPAN");
var entryText = document.createTextNode(listDetail.value);
entry.className = "userEntry";
entry.appendChild(entryText);
li.appendChild(entry);
var close = document.createElement("SPAN");
var cText = document.createTextNode("\u00D7");
close.className = "close";
close.appendChild(cText);
li.appendChild(close);
close.onclick = function () {
this.parentElement.style.display = "none";
}
var edit = document.createElement("SPAN");
var eText = document.createTextNode("\u270E");
edit.className = "edit";
edit.appendChild(eText);
li.appendChild(edit);
edit.onclick = function () {
var p = prompt("Edit your entry");
var entry = this.parentElement.getElementsByClassName("userEntry")[0]; // get sibling userEntry element
entry.innerText = p;
}
li.onclick = function () {
this.classList.toggle("checked");
}
listDetail.value = "";
}
<body>
<div id="wrapper">
<div id="inputWrapper">
<input type="text" name="" id="listDetail" placeholder="What's the task about" autofocus>
<button id="addBtn">Add</button>
</div>
<ul id="ul"></ul>
You have to create an ID for each specific tag, and when the user edits it uses that rather than the class.
var listDetail = document.getElementById("listDetail");
var addBtn = document.getElementById("addBtn");
var ul = document.getElementById("ul");
var cnt = 0
addBtn.onclick = function() {
if (listDetail.value !== "") {
var li = document.createElement("LI");
ul.appendChild(li);
} else {
alert("List item cannot be empty");
}
var entry = document.createElement("SPAN");
var entryText = document.createTextNode(listDetail.value);
entry.className = "userEntry";
entry.setAttribute("id", "entry" + cnt);
entry.appendChild(entryText);
li.appendChild(entry);
var span = document.createElement("SPAN");
var spanText = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(spanText);
li.appendChild(span);
var close = document.getElementsByClassName("close");
for (var i = 0; i < close.length; i++) {
close[i].onclick = function() {
this.parentElement.style.display = "none";
}
}
var edit = document.createElement("SPAN");
var eText = document.createTextNode("\u270E");
edit.className = "edit";
edit.setAttribute("id", "edit" + cnt);
edit.appendChild(eText);
li.appendChild(edit);
var editC = document.getElementById("edit" + cnt);
editC.onclick = function() {
var p = prompt("Edit your entry");
var obj = document.getElementById("entry" + cnt);
obj.innerText = p;
}
var liTag = document.getElementsByTagName("LI");
for (var j = 0; j < liTag.length; j++) {
liTag[j].onclick = function() {
this.classList.toggle("checked");
}
}
listDetail.value = "";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vquery/5.0.1/v.min.js"></script>
<div id="wrapper">
<div id="inputWrapper">
<input type="text" name="" id="listDetail" placeholder="What's the task about" autofocus>
<button id="addBtn">Add</button>
</div>
<ul id="ul"></ul>
I wan't add element after every DIV tag, while 'i=0','i=1','i=2'...untill 'max-DIV.length'. What should I do? I'm just a little worry.. OH!
var NewSpan = document.createElement("span");
NewSpan.setAttribute("id", "gotop");
var NewSpanText = document.createTextNode("to be continue...");
NewSpan.appendChild(NewSpanText);
var i = 0;
var OldDiv = document.getElementsByTagName('div')[i];
var parent = OldDiv.parentNode;
if (parent.lastChild == OldDiv) {
parent.appendChild(NewSpan);
} else {
parent.insertBefore(NewSpan, OldDiv.nextSibling);
};
<div id="n1">DIV</div>
<div id="n2">DIV</div>
<div id="n3">DIV</div>
<div id="n4">DIV</div>
lile this
You need to wrap this in a for loop and create a new span element every time you want to insert one.
var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; i++) {
var NewSpan = document.createElement("span");
NewSpan.setAttribute("id", "gotop" + i); // Can't have duplicate IDs
var NewSpanText = document.createTextNode("to be continue...");
NewSpan.appendChild(NewSpanText);
var OldDiv = divs[i];
var parent = OldDiv.parentNode;
if (parent.lastChild == OldDiv) {
parent.appendChild(NewSpan);
} else {
parent.insertBefore(NewSpan, OldDiv.nextSibling);
}
}
<div id="n1">DIV</div>
<div id="n2">DIV</div>
<div id="n3">DIV</div>
<div id="n4">DIV</div>
I am building a small todo list and want to do the following: each text input (or actually a copy of the text input) should be added to an empty string (copy because it should not disappear when added). Then I have a function which is called when user clicks on a button and then I want to pick a random todo thing.
I didn't even get to the point when I pick out a random todo thing because my code just doesn't work- It seems like the adding does happen, but instead of adding a todo thing, thats being added:[object HTMLInputElement]
Anyone has an idea?
My javascript code:
var totalItems=0;
var listOf="";
function randomItem(){
document.getElementById("randomArray").innerHTML=listOf;
}
function updatingItem() {
var cbId = this.id.replace("cb_", "");
var textItem = document.getElementById("item_" + cbId);
if (this.checked) {
textItem.style.textDecoration = "line-through";
textItem.style.background="pink";
}
else {
textItem.style.textDecoration = "none";
textItem.style.background="white";
}
}
function addItem() {
totalItems++;
var entry = document.createElement("li");
var checkBox = document.createElement("input");
checkBox.type = "checkbox";
checkBox.id = "cb_" + totalItems;
checkBox.onclick = updatingItem;
var span = document.createElement("span");
span.id = "item_" + totalItems;
span.innerHtml = textItem;
var textItem = document.getElementById("textItem");
span.innerText = textItem.value;
var location = document.getElementById("todoList");
entry.appendChild(checkBox);
entry.appendChild(span);
location.appendChild(entry);
var listOfItems=textItem;
listOf+=listOfItems;
}
var item = document.getElementById("add");
item.onclick = addItem;
document.getElementById("lastButton").onclick=randomItem;
HTML:
<body>
<div class="table">
<h1>To Do List</h1>
</div>
<p>
<input type="text" id="textItem"/>
<button id="add"><b>Add</b></button>
</p>
<ul id="todoList"></ul>
<h3>Pick a random to do thing to do for today</h3>
<button id="lastButton">Go!</button>
<p id="randomArray"></p>
</body>
Your randomItem() function is working incorrectly, as you are trying to create String from Object directly while using listOfItems. Either use its value or try using following code instead for proper view. Also add one list element in HTML with id="myList". IT will work fine.
JS:
function randomItem(){
var counter = 0;
var textItems = document.getElementsByTagName("input");
var done = [];
for (var i=0; i<textItems.length; i++)
{
if(textItems[i].type == "checkbox")
{
if(textItems[i].checked)
{
document.getElementById("item_"+i);
done.push(document.getElementById("item_"+i).innerHTML);
var list = document.getElementById('myList');
var data = document.createElement('li');
data.appendChild(document.createTextNode(done[counter]));
counter++;
list.appendChild(data);
}
}
}
}
HTML:
<ol id = "myList"></ol>
try
var listOfItems=textItem.value;
rather than
var listOfItems=textItem;