How to save data after refreshing a page - javascript

Here is my script of to do list. I wanna add a new note to my ul list.
li > p > i, i, input :
var list = document.querySelector('.list');
document.querySelector('.add-btn').addEventListener('click', function(e){
e.preventDefault();
var input = document.querySelector('.add-input');
if(input.value !== '') {
var li = document.createElement('li');
firstP = document.createElement('p');
secondP = document.createElement('p');
firstIc = document.createElement('i');
secondIc = document.createElement('i');
input1 = document.createElement('input');
firstIc.className = 'fas fa-edit';
secondIc.className = 'fas fa-trash-alt';
input1.className = 'edit-note';
input1.setAttribute('type', 'text');
firstP.textContent = input.value;
secondP.appendChild(firstIc);
secondP.appendChild(secondIc);
li.appendChild(firstP);
li.appendChild(secondP);
li.appendChild(input1);
li.appendChild(li);
}
});
Here is HTML:
<div class='container'>
<h1>Note manager</h1>
<ul class="list">
<li>
<p>First note</p>
<p><i class="fas fa-edit"></i><i class="fas fa-trash-alt"></i></p>
<input type="text" name="" class="edit-note">
</li>
<li>
<p>Second note</p>
<p><i class="fas fa-edit"></i><i class="fas fa-trash-alt"></i></p>
<input type="text" name="" class="edit-note">
</li>
</ul>
<div class="add-notes">
<input type="text" name="" class="add-input" placeholder="Add a note..">
<button type="submit" class="add-btn"> Add</button>
</div>
</div>
And I wanna save added notes when I refresh the page. How can I do this ?
Should I use AJAX >?

Look at this line:
li.appendChild(li);
Here you add element as child of itself (of course it's not possible), looks like you want to do
list.appendChild(li);
instead.
EDIT:
Answer to your updated question: you should post your items to server and save them there or you can use localStorage to keep items in browser (link)

Related

How can I add the functionality to delete and edit an item in a "To Do List" with JavaScript only?

I am learning JavaScript and I am trying to create a to list. I have successfully been able to:
add new items to the list and able to cross off when each item is clicked
Append an edit button to each new item
I need help with this functionality:
add a trash can icon when the item is added
be able to add an event listener to each icon so that is deleted when clicked
3)Be able to edit each item and save it when the edit button is clicked
Any help would be appreciated!
https://codepen.io/stefan927/pen/qBVLpxm
"<html>
<body onload="taskComplete()">
<div class="card">
<div class="card-body">
<h3 class="card-title" id="header">Today's To Do List</h3>
<form id="todo-form">
<div class="input">
<input type="text" onfocus="this.value=''"
class="form-
control" id="todo-input" value="What do I want to do?">
</div>
<div class="form-group">
<input type="button" onclick = "addItemToTheList()"
class="btn btn-secondary btn-block" value="Add">
<p> Click an item to cross it off! </p>
</div>
</form>
</div>
<ul class="list-group list-group-flush" id="todo-list">
<li class="list-group-item">Pick up groceries
<i class="fas fa-trash-alt"></i> <button
class="edit">Edit</button>
</li>
<li class="list-group-item">Finish essay
<i class="fas fa-trash-alt"></i><button
class="edit">Edit</button>
</li>
<li class="list-group-item">Soccer # 5:00
<i class="fas fa-trash-alt"></i><button
class="edit">Edit</button>
</ul>
</div>
</body>
</html>"
"// Create an alert that asks for user name and then add it to
the heading.
//var name = prompt("Hello my name is");
//alert("Hello, " + name);
header.innerText = name + "'s To Do List";
// Define variables
var newItem = document.createElement("li");
var input = document.getElementById("todo-input");
var icon = "fas fa-trash-alt";
var i = document.createElement('i');
var editInput = document.createElement("input");
//button.edit
var editButton = document.createElement("button");
//button.delete
editButton.innerText = "Edit";
editButton.className = "edit";
// create a function that adds new items to the list with a trash
icon
function addItemToTheList() {
newItem.innerHTML = input.value;
input.value = "";
document.getElementById("todo-list").appendChild(newItem);
newItem.appendChild(editButton);
// Add click listener
newItem.addEventListener('click', done);
}
function done() {
this.className = "done";
this.removeEventListener('click',done);
}
// Initialize all listener for current undone tasks
function taskComplete() {
var undoneItems = document.getElementsByClassName('undone');
for(var i = 0; i < undoneItems.length; i++){
undoneItems[i].addEventListener('click', done);
}
// Delete item from list when trash icon is clicked
function deleteItem() {
i.onclick = deleteItem;
li.setAttribute('id', input.value);
li.classList.add("list-group-item");
i.className = icon;
}
//Edit an existing task
var editTask = function(){
console.log("Edit task...");
var listItem = this.parentNode;
var editInput = listItem.querySelector("input[type=text]");
var label = listItem.querySelector("label");
var containsClass = listItem.classList.contains("editMode");
//if the class pf parent is .editmode
if (containsClass){
//label text become the input's value
label.innerText = editInput.value;
} else {
//switch to .editmode
//input value becomes the label's text
editInput.vaule = label.innerText;
}
listItem.classList.toggle("editMode"); //toggle .editmode on the
parent
}
}"

create list item from input value

I'm working on a to-do list project and I got a problem, I want that when I click on the submit button the input value becomes a list item but it doesn't work.
here's the code:
let btn = document.getElementById('btn')
let txt = document.getElementById('txt')
btn.addEventListener('click', function(){
let list = document.createElement('li')
list.innerHTML = txt.value
})
<h1 id="title">To do list</h1>
<div class="main">
<input type="text" alt="type text here" id="txt">
<button type="submit" id="btn">Submit</button>
</div>
you forgot document.body.appendChild(list);
You need to have a ul (if it is to be an unordered list) element in your document - or to create one with JS, and then you need to add the new list items to that (not to the body).
Try this snippet (where the ul element is already in the document)
let btn = document.getElementById('btn')
let txt = document.getElementById('txt')
let ul = document.getElementById('ul');
btn.addEventListener('click', function() {
let list = document.createElement('li')
list.innerHTML = txt.value;
ul.appendChild(list);
})
<h1 id="title">To do list</h1>
<div class="main">
<input type="text" alt="type text here" id="txt">
<button type="submit" id="btn">Submit</button>
</div>
<ul id="ul">
</ul>

How to create dynamic form elements using cloneNode

I'm trying to create an interactive resume template using javascript and html and have managed to use cloneNode to duplicate work history blocks (see attached screenshot)
The problem(s) I am having is that clicking on the add list item button in the cloned/duplicated work history block at the bottom, creates a <li> item in the 1st/cloned element.
The objective is to be able to add or delete ````` list elements within a specific work history block and to also be able to add/remove entire work history sections. Currently it deletes from the top down, which is also an issue.
Thanks for any pointers in advance.
CODE
<!DOCTYPE html>
<html>
<body>
<div id="test">
<div id="node">
<div class="work_history">
<div class="row">
<strong>
<input type="text" name="company" value="ACME Company">
</strong>
</div>
<div class="row">
<input type="text" name="position" value="Cheese Taster">
</div>
<input type="text" name="start" value="1/2019">
<input type="text" name="end" value="2/2020">
<ul id="list">
<li>
<textarea id="task" name="task" rows="4" cols="50">Did some things. Tasted cheese.</textarea>
</li>
<button onclick="addTask()">Add List Item</button>
<button onclick="RemoveTask()">Delete List Item</button>
</ul>
<button onclick="addWork()">Add Work</button>
<button onclick="removeWork()">Remove Work</button>
</div>
</div>
</div>
<script>
function addWork() {
var div = document.getElementById("node");
var cln = div.cloneNode(true);
//cln.setAttribute( 'id', 'newId');
document.getElementById("test").appendChild(cln);
}
function removeWork(){
var last = document.getElementById("test");
// want to delete the last added work history not first
last.removeChild(last.childNodes[0]);
}
function addTask(){
var ul = document.getElementById("list");
var task = document.getElementById("task");
var li = document.createElement("li");
li.setAttribute('id',task.value);
li.appendChild(document.createTextNode(task.value));
ul.appendChild(li);
}
function removeTask(){
var ul = document.getElementById("list");
var task = document.getElementById("task");
var item = document.getElementById(task.value);
ul.removeChild(item);
}
</script>
</body>
</html>
You'd have to use e.currentTarget instead of document.getElementById, otherwise you're only referring to the first instance of it:
function addWork(e) {
const div = e.currentTarget.parentElement;
const cln = div.cloneNode(true);
document.getElementById("test").appendChild(cln);
}
function removeWork(e) {
const last = e.currentTarget.parentElement;
last.parentElement.removeChild(last);
}
function addTask(e) {
const ul = e.currentTarget.parentNode;
let task = ul.children[0].childNodes[1].value;
let li = document.createElement("li");
// Replace paragraph breaks
task = task.replace(/\r?\n|\r/g, " ");
li.innerText = task;
ul.appendChild(li);
}
function removeTask(e) {
const ul = e.currentTarget.parentNode;
ul.removeChild(ul.lastChild);
}
<!DOCTYPE html>
<html>
<body>
<div id="test">
<div id="node">
<div class="work_history">
<div class="row">
<strong>
<input type="text" name="company" value="ACME Company">
</strong>
</div>
<div class="row">
<input type="text" name="position" value="Cheese Taster">
</div>
<input type="text" name="start" value="1/2019">
<input type="text" name="end" value="2/2020">
<ul id="list">
<li>
<textarea name="task" rows="4" cols="50">Did some things. Tasted cheese.</textarea>
</li>
<button onclick="addTask(event)">Add List Item</button>
<button onclick="removeTask(event)">Delete List Item</button>
</ul>
<button onclick="addWork(event)">Add Work</button>
<button onclick="removeWork(event)">Remove Work</button>
</div>
</div>
</div>
</body>
</html>
This allows you to refer to the specific element where the click event occurred and add/remove any elements that are relative within the DOM.
As a side note, it's best practice to have unique id attributes, adding the same id to multiple elements goes against that.
var add_button = $(".add_form_field");
var wrapper = $(".container1");
var max_fields = 9;
var x = 1;
$(add_button).click(function (e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append(
` <div class="email">
<label for="">Year</label>
<input type="text" name="eduYear${x}">
<label for="">Title Name</label>
<input type="text" name="eduTitle${x}">
<label for="">Institution/School Name</label>
<input type="text" name="eduPlace${x}">
<label for="">Details</label>
<input type="text" name="eduNotes${x}"> <br>Delete<hr></div>`
); //add input box
}
});
$(wrapper).on("click", ".delete", function (e) {
e.preventDefault();
$(this).parent("div").remove();
x--;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container1">
<h2>Educations</h2>
<button type="button" class="add_form_field">Add Education
<span style="font-size:16px; font-weight:bold;">+ </span>
</button>
<div class="email">
<label for="">Year</label>
<input type="number" name="eduYear1">
<label for="">Title Name</label>
<input type="text" name="eduTitle1">
<label for="">Institution/School Name</label>
<input type="text" name="eduPlace1">
<label for="">Details</label>
<input type="text" name="eduNotes1">
</div>
you can try this to create dynamic form

JavaScript create element not working

I'm trying to add a menu page to my wordpress site for series script.
To easy understand "bolum" means episode and "sezon" means season.
Javascript
function addSeason() {
var main_div = document.getElementById("taxonamy-category");
var helper_son = document.getElementById("sezon-son");
var helper_active = document.getElementById("sezon-active");
var last_active = document.getElementById("sezon-" + helper_active.getAttribute("value"));
var ul = document.getElementById("sezon-tabs");
var yeni_sezon = parseInt(helper_son.getAttribute("value"), 10) + 1;
var li = document.createElement("li");
var a = document.createElement("a");
var last_div = document.getElementById("bolumler-" + yeni_sezon - 1);
var div = document.createElement("div");
var a2 = document.createElement("a");
a2.appendChild(document.createTextNode(" + Yeni Bölüm Ekle"));
a2.setAttribute("id", "bolum-add");
a2.setAttribute("onclick", "return addBolum();");
a2.setAttribute("class", "taxonamy-add-new");
div.setAttribute("id", "bolumler-" + yeni_sezon);
div.setAttribute("class", "tabs-panel");
div.setAttribute("style", "display:block;");
last_div.setAttribute("style", "display:none;");
div.appendChild(a2);
main_div.appendChild(div);
a.appendChild(document.createTextNode("Sezon " + yeni_sezon));
a.setAttribute("href", "#sezon-" + yeni_sezon);
a.setAttribute("id", "sezon");
a.setAttribute("onclick", "return focusSeason();");
li.setAttribute("id", "sezon-" + yeni_sezon);
li.setAttribute("class", "tabs");
li.appendChild(a);
ul.appendChild(li);
last_active.removeAttribute("class");
helper_active.setAttribute("value", yeni_sezon);
helper_son.setAttribute("value", yeni_sezon);
}
HTML
<div id="bolumler" class="postbox">
<h2 class="hndle ui-sortable-handle"><span>Bölümler</span></h2>
<div class="inside">
<div id="taxonamy-category" class="categorydiv">
<ul id="sezon-tabs" class="category-tabs">
<li class="tabs" id="sezon-1">
<a id="sezon" onclick="return focusSeason();" href="#sezon-1">Sezon 1</a>
</li>
</ul>
<div id="bolumler-1" class="tabs-panel" style="display:block;">
<a id="bolum-add" class="taxonamy-add-new" onclick="return addBolum();"> + Yeni Bölüm Ekle</a>
</div>
<div id="category-adder">
<input type="button" name="add-sez" id="add-sez" class="button button-primary button-large" value="Sezon Ekle" onclick="addSeason()" />
</div>
</div>
</div>
</div>
and these 2 hidden elements on my html for storing last season etc.
<input type="hidden" name="sezon-son" id="sezon-son" value="1" />
<input type="hidden" name="sezon-active" id="sezon-active" value="1" />
This js function has no effect i'm checking it with chrome.Has anyone know the problem ?
Thanks so much
First of all, you have id dublicate:
<li id=sezon-active> and <input id=sezon-active>
Also, "bolumler-"+yeni_sezon-1 equals NaN, it should be "bolumler-"+(yeni_sezon-1).
You should rename <a id="sezon" ... to <a id="sezon-1" also to make your code work without errors.
Some more fixes made, here is working code:
https://jsfiddle.net/maxim_mazurok/4fj15hav/

Appending input value to list using Javascript. To Do List

I am attempting to make a todo list.Not too sure why my code isn't working.Trying to get the value from the add item input to the To-Do ul.
HTML
<body>
<div class = 'container'>
<h3> Add Item </h3>
<input id='newTask' type='text'> <button id='addTaskButton'> Add </button>
<h3> To-Do </h3>
<ul id='toDo'>
<li> <input type='checkbox'<label> Learn Javascript </label> <button class='delete'> Delete </button> </li>
</ul>
<h3> Completed </h3>
<ul id='completedTasks'>
<li> <input type='checkbox' checked> <label> Buy Peanut Butter </label> <button class='delete'> Delete </button> </li>
</ul>
</div>
<script src = "todolist.js" type="text/javascript"></script>
</body>
Javascript
var taskInput = document.getElementById('newTask');
var addTaskButton = document.getElementById('addTaskButton');
var incompleteTasks = document.getElementById('toDo');
var completedTask = document.getElementById('completedTasks');
var addTask = function () {
var text = taskInput.value;
var li = '<li>' + text + '<li>';
incompleteTasks.appendChild(li);
}
addTaskButton.onclick = addTask;
Any help is greatly appreciated.
Thanks
appendChild accepts a DOMElement, not a string. You need to create an element first and then append it:
var addTask = function () {
var text = taskInput.value;
var li = document.createElement('li');
li.innerHTML = text;
incompleteTasks.appendChild(li);
}
Demo: http://jsfiddle.net/6wbsujL5/

Categories