I apologize for posting this question, I'm just learning JavaScript and have tried using the information from other posts but just cannot get my code to work. The object is to create an li tag and insert list items to this newly created tag, then assign an event handler to remove an item if the user clicks on it.
I have the list populating and can remove an item if I hardcode it but cannot for the life of me figure out how to assign the value of the item being clicked on to the removeItem function. I am also trying to clear the list when an item is entered but keep getting the error "Object doesn't support property or method 'reset'".
If someone could point me in the right direction I would appreciate it.
thanks!
<!doctype html>
<html lang="en">
<head>
<title> Add and delete items Objective </title>
<meta charset="utf-8">
<style>
p {
font-style: italic;
}
li:hover {
cursor: pointer;
}
</style>
<script>
// your code here!
var itemList = [];
window.onload = init;
function init() {
var addButton = document.getElementById("submitButton");
addButton.onclick = addItem;
//var itemList = document.getElementById("list");
var itemsList = document.getElementsByTagName("li");
itemsList.onclick = removeItem;
}
function addItem() {
var newItem = document.getElementById("item").value;
var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode(newItem));
ul.appendChild(li);
itemList.push(newItem);
document.getElementById("item").reset();
}
function removeItem() {
var editList = document.getElementsByTagName("li");
// var editList = document.getElementsById("list");
for (var i = 0; i < editList.length; i++) {
var item = editList[i];
if(editList.options[i].selected) {
editList.removeChild(editList.childNodes[i]);
}
}
}
</script>
</head>
<body>
<form>
<label form="item">Add an item: </label>
<input id="item" type="text" size="20"><br>
<input id="submitButton" type="button" value="Add!">
</form>
<ul id="list">
</ul>
<p>
Click an item to remove it from the list.
</p>
</body>
</html>
Why not set the value of the item input to an empty string rather than using reset?
document.getElementById("item").value = "";
As for removing the list items...
for (var i = 0; i < ul.children.length; i++) {
ul.children[i].addEventListener("click", removeItem);
}
you can only reset forms, so you have to select the form and then reset will work. f.e. with:
document.forms[0].reset()
your code is adding the eventhandler to all existing li-Elements, if you create some new li-Elements later, you have to add the eventhandler to it manually. f.e. in your addItem-Function with:
li.onclick = removeItem;
after pushing the new Item
in your removeItem-Function you have access on the clicked Element via this, so you can remove only this Element with:
this.remove()
You could change your addItem() and removeItem() functions :
function addItem() {
var newItem = document.getElementById("item").value;
$('#list').append("<li id='" + newItem + "' onclick='removeItem(this)'>" + newItem + "</li>");
}
function removeItem(id) {
$(id).remove();
}
Related
I am trying to make a schema generator which will work something like this:
https://wtools.io/breadcrumb-json-ld-schema-generator
But the problem is i am able to add values and generate the schema list items but everytime i click "click me" a value is added to the schema as ListItem which is clearly not the intended behavior. Also, am failing to remove any added item from the generated schema even when i remove it from the list above.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
background: silver;
}
.dis {
display: none;
}
</style>
</head>
<body>
<form>
<label for="item">Add an item: </label>
<input id="item" type="text" size="20"><br>
<input id="url" type="url" size="20"><br>
<input id="submitButton" type="button" value="Add!">
</form>
<ul id="ul">
</ul>
<p> Click an item to remove it from the list. </p>
<button onclick="myFunction();">Click me</button>
<br><br> <script type="application/ld+json"><br>
<div class="output">{ "#context": "https://schema.org", "#type": "BreadcrumbList", "itemListElement": [ { "#type": "ListItem", "position": 1, "name": "Google", "item": "google.com" } ] }</div></script>
</body>
</html>
window.onload = function() {
var button = document.getElementById("submitButton");
button.onclick = addItem;
}
function addItem() {
var textInput = document.getElementById("item"); //getting text input
var text = textInput.value; //getting value of text input element
var ul = document.getElementById("ul"); //getting element <ul> to add element to
var li = document.createElement("li"); //creating li element to add
li.setAttribute("class", "breadcrumb-item");
li.innerHTML = text; //inserting text into newly created <li> element
li.onclick = function() {
this.parentNode.removeChild(this);
setTimeout(function() {}, 1000);
}
ul.appendChild(li);
}
//script generation code here
// Create Script
var el = document.createElement('script');
el.type = 'application/ld+json';
// Set initial position
var position = 0;
// Create breadcrumb object
var breadcrumb = {
position: 0,
name: "",
item: ""
}
// Empty array for list items
var listArray = []
function myFunction() {
// Loop through each breadcrumb link and set attributes
var items = document.querySelectorAll('.breadcrumb-item');
for (var i = 0; i < 1; i++) {
var newItem = Object.create(breadcrumb);
var curItem = items[i];
newItem["#type"] = "ListItem";
position++;
newItem.position = position;
newItem.name = document.getElementById("item").value;
newItem.item = document.getElementById("url").value;
listArray.push(newItem);
}
// Create overarching Schema object
var breadcrumbSchema = {
"#context": "https://schema.org/",
"#type": "BreadcrumbList",
"itemListElement": listArray
};
var finalSchema = JSON.stringify(breadcrumbSchema);
// Add schema to Script
el.text = finalSchema;
// Set head variable with browser fallback
var head = document.head || document.getElementsByTagName("head")[0];
// Testing purposes - Show example of string in HTML
document.querySelector('.output').innerHTML = finalSchema;
// This won't work in codepen
head.appendChild(el);
// Testing purposes - Inspect source to see script generated inside of the "output" div
document.querySelector('.output').appendChild(el);
}
This is my first time working with JS so any help will be appreciated.
When you create the function to remove an item from your unordered list try adding a call to remove it from the listArray.
let textInput = document.getElementById("item"); //getting text input
let text = textInput.value; //getting value of text input element
let ul = document.getElementById("ul"); //getting element <ul> to add element to
let li = document.createElement("li"); //creating li element to add
li.setAttribute("class", "breadcrumb-item");
li.innerHTML = text; //inserting text into newly created <li> element
li.onclick = function() {
this.parentNode.removeChild(this);
//call to remove from listArray goes here
setTimeout(function() {
}, 1000);
}
ul.appendChild(li);
It might look like:
function removefromlist(item_position)
{
for(l in listArray){
if(listArray[1].position == item_position){
listArray.splice(l,1);
break;
}
}
}
Unless I'm missing something I'm not sure what other type would be added to your schema, because on line 92 of your code "ListItem" is the only type you ever assign.
So I'm trying to add a prompt which asks the user what they would like to add to an array. However, whenever I refresh the page, it gets deleted like it is only in local storage. I would like to add this to the actual code so it gets displayed permanently within the page.
Here is the relavent code:
<html>
<body>
<div class="ann" id="shadowbox">
<h4>Latest Announcements</h4>
<ul id="myUl"></ul>
</div>
<button onclick="fc()">populate</button>
<script>
var announcements = ["test",]
for (i = 0; i < announcements.length; i++) {
var li = document.createElement("li");
var text = document.createTextNode(announcements[i]);
li.appendChild(text);
document.getElementById("myUl").appendChild(li);
}
function fc() {
var asdkz = prompt("What would you like to add?")
announcements.push(asdkz);
}
</script>
You need to use localStorage to save the content of the array after refresh. Here is the solution with some modification:
<html>
<body>
<div class="ann" id="shadowbox">
<h4>Latest Announcements</h4>
<ul id="myUl"></ul>
</div>
<button onclick="fc()">populate</button>
<script>
var announcements = (localStorage.getItem("list")) ? localStorage.getItem("list").split(",") : ["test"]
updateList();
function updateList(){
document.getElementById("myUl").innerHTML = "";
for (i = 0; i < announcements.length; i++) {
var li = document.createElement("li");
var text = document.createTextNode(announcements[i]);
li.appendChild(text);
document.getElementById("myUl").appendChild(li);
}
}
function fc() {
var asdkz = prompt("What would you like to add?")
announcements.push(asdkz);
localStorage.setItem("list",announcements);
updateList();
}
</script>
I'm trying to write a CRUD app. I'm having trouble figuring out how to edit and delete individual items. For each item created, I'm making two <a> tags inside of a <span> tag. One for edit and one for delete. But I can't seem to figure out how to make them do what they need to do. At this point they don't do anything because I can't figure out how to access the values correctly.
Note - I'm just beginning to learn jQuery so, any pro tips on that are appreciated.
Here's the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<form class='form'>
<input id="input" type="text" placeholder="Type here..">
</form>
<h3>Notes</h3>
<ul></ul>
<button id='clear'>Clear All</button>
</div>
<script src="app.js"></script>
</body>
</html>
And the javascript:
const app = {};
app.counter = (function(){
var i = -1;
return function(){
i += 1;
return i;
}
})()
app.create = function(element){
return document.createElement(element);
}
app.select = function(element){
return document.querySelector(element);
}
app.makeList = function(text) {
var i = app.counter();
var li = app.create('li');
var div = app.create('span');
var edit = app.create('a');
var del = app.create('a');
li.textContent = text;
edit.textContent = ' Edit';
edit.href = '#'
del.textContent = ' Delete';
del.href = '#'
div.appendChild(edit);
div.appendChild(del);
li.appendChild(div);
ul.insertBefore(li, ul.childNodes[0])
li.id = 'item' + i;
del.id = 'delete' + i;
edit.id = 'edit' + i;
}
// constants & variables
const ul = app.select('ul')
const input = app.select('input')
var notes;
$(document).ready(function(){
if (localStorage.getItem('notes')) {
notes = JSON.parse(localStorage.getItem('notes'));
} else {
notes = [];
}
localStorage.setItem('notes', JSON.stringify(notes));
// build list items and display them on the page
JSON.parse(localStorage.getItem('notes')).forEach(function(item){
app.makeList(item);
});
// when form is submitted
$('.form').submit(function(e){
e.preventDefault();
if (input.value.length > 0){
notes.push(input.value);
localStorage.setItem('notes', JSON.stringify(notes));
app.makeList(input.value);
input.value = "";
}
})
// clear items on page and from local storage
$('#clear').click(function(){
if (window.confirm('This will clear all items.\nAre you sure you want to do this?')){
localStorage.clear();
while (ul.firstChild) {
ul.removeChild(ul.firstChild)
}
}
});
$('ul').on('click', 'li', function(){
console.log(this.textContent) // logs whatever is typed + Edit Delete
})
});
Do something like this.
$("ul").on("click", "li", function(e) {
console.log(this.textContent); // logs whatever is typed + Edit Delete
if(e.target.id === "edit") {
//edit
}
if(e.target.id==="delete") {
//delete
}
});
You are trying to access elements before they are ready that is why you are not able to see anything.
Declare them on global level but assign them value after the document is ready.
var ul;
var input;
var notes;
$(document).ready(function () {
ul = app.select('ul')
input = app.select('input')
...Rest of your code
});
For the Edit and Delete Functionality
As you are appedning IDs in edit and delete button you need to parse that as well
$('ul').on('click', 'li', function (e) {
if (e.target.id.includes('edit')) {
console.log(` item ${e.target.id.split('edit')[1]} needs to be edited.`)
}
if (e.target.id.includes('delete')) {
//delete
}
})
I'm just starting to learn JS and collided with a specific task that i dont understand how to solve.
Suppose we have a page that has a list, and there is a button with which I can supplement this list with new cases.
The problem that I encountered:
I need to implement a function in a certain way that will change the style of the selected line from the list of all existing and added elements.
For example, if our list - "a list of things that we have to do", i need to make so that the user can press the "Done" button, and select the desired line. After the selection the selected line gets a line-through.
function addItemToTheList() {
var newItem = document.createElement("li");
var input = document.getElementById("Input");
newItem.innerHTML = input.value;
input.value = "";
document.getElementById("todo").appendChild(newItem);
}
#todo {
font-family: Arial;
}
#todo .done {
color:gray;
text-decoration:line-through;
}
<!doctype html>
<html>
<head>
<title> How can user change added and predefined elements in the list?</title>
</head>
<pre>
<input type = "text" id = "Input" maxlength = "42" size = "42" placeholder = " Add a task here"> <input
type = "button" value = "Add" onclick = "addItemToTheList()">
</pre>
<hr align = "left" width = "378">
<body>
<div id = "todoList">
<ol id = "todo">
<li class = "done"> Watch all seasons of "Game of Thrones"</li>
<li class = "done"> Write a book</li>
<li class = "undone"> Learn "JS"</li>
</ol>
</div>
</body>
</html>
Would anybody be willing to point me in the right direction?
You have to add, first, a click event on each undone tasks.
Then when you create a task just add another clickevent.
Then you just have to click on an undone tasks to change his state.
Hope this is what you want :
function addItemToTheList() {
var newItem = document.createElement("li");
var input = document.getElementById("Input");
newItem.innerHTML = input.value;
input.value = "";
document.getElementById("todo").appendChild(newItem);
// Add click listener
newItem.addEventListener('click', done);
}
function done() {
this.className = "done";
this.removeEventListener('click',done);
}
// Initialize all listener for current undone tasks
function init() {
var undoneItems = document.getElementsByClassName('undone');
for(var i = 0; i < undoneItems.length; i++){
undoneItems[i].addEventListener('click', done);
}
}
#todo {
font-family: Arial;
}
#todo .done {
color:gray;
text-decoration:line-through;
}
#todo .undone {
cursor: pointer;
}
<!doctype html>
<html>
<head>
<title> How can user change added and predefined elements in the list?</title>
</head>
<body onload="init()">
<pre>
<input type = "text" id = "Input" maxlength = "42" size = "42" placeholder = " Add a task here"> <input
type = "button" value = "Add" onclick = "addItemToTheList()">
</pre>
<hr align = "left" width = "378">
<div id = "todoList">
<ol id = "todo">
<li class = "done"> Watch all seasons of "Game of Thrones"</li>
<li class = "done"> Write a book</li>
<li class = "undone"> Learn "JS"</li>
</ol>
</div>
</body>
</html>
You need to create another function, add a button to each of the li items and add an on click function to each button to change the class to done.
Here is a jsfiddle link where i've begun the work required. It isn't fully functional but what would you learn from me doing everything :)
https://jsfiddle.net/nu6b00o0/
(function(){
var buttons = document.getElementsByTagName('button');
for(i = 0; i <= buttons.length -1; i++){
buttons[i].addEventListener('click', function() {
doOrUndoItem();
}, false);
if(buttons[i].parentNode.className == 'done'){
buttons[i].className = 'btn-success';
} else {
buttons[i].className = 'btn-warning';
}
}
}());
Feel free to ask any more questions
Tom
Hope this helps...
//list your pre existing items
var items = document.querySelectorAll("li");
function createListElement(){
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
ul.appendChild(li);
//add the function in your new items
li.addEventListener("click", alterStatus)
//
input.value = "";
}
// add/remove class
function alterStatus(){
this.classList.toggle("done");
}
//set the function to the pre existing items
for (var i = 0; i < items.length; i++) {
items[i].addEventListener("click", alterStatus);
}
i am trying to build post it notes. I am reading Head First Series.
I did this code.
but somehow it's no working.
<form action="post">
<input id="note_text" type="text" placeholder="enter your Note">
<input type="button" id="add_button" value="Add Note">
</form>
<ul id="postItNotesList">
<li>This is my very first note.</li>
<li>This is my very Second note.</li>
</ul>
And here is the Js
window.onload=init;
// Add Sticky to Page
function addStickyToPage(value) {
var sticky = document.createElement("li");
span.setAttribute("class", "sticky");
document.getElementById("postItNotesList").appendChild(sticky);
}
// Create and get Sticky Note into the localStorage
function createSticky() {
var value = document.getElementById("note_text").value;
var key = "sticky_" + localStorage.length;
localStorage.setItem(key, value);
addStickyToPage(value);
}
function init() {
var button = document.getElementById("add_button");
button.onclick = createSticky;
for (var i = 0; i < localStorage.length; i++) {
var key = localStorage.key(i);
if (key.substring(0, 6) == "sticky") {
var value = localStorage.getItem(key);
addStickyToPage(value);
}
}
}
So i've buld up a fiddle so that you can easily check it out
Here is the Fiddle
Please tell me where i am doing it wrong.
Thanks.
I have updated your Fiddle. Note : first you should create DOM element and then append text to this element and finally append this node to you body so your code should be like this:
window.onload=init();
function addStickyToPage(value) {
var sticky = document.createElement("li");
sticky.setAttribute("class", "sticky");
var t = document.createTextNode(value);
console.log(t);
sticky.appendChild(t);
document.getElementById("postItNotesList").appendChild(sticky);
}
And also windows.onload = init()with brackets
Thanks