I am writing a code that will allow users to write note, I'm using fieldset instead of textarea. I need to access the value in the fieldset and make use of the text. I can't access it unless I add an input elements.
const write = document.querySelector("#write");
const body = document.querySelector("body");
const form = document.querySelector("#form")
const list = document.querySelector("#list");
const button = document.createElement("button");
write.addEventListener("click", function (e){
e.preventDefault()
console.log(e);
const page = document.createElement("form");
const fieldset = document.createElement("fieldset");
page.action = "./nowhere";
fieldset.contentEditable = true;
fieldset.id = "text";
fieldset.name = "text";
// fieldset.append(input)
page.append(fieldset);
write.append(page);
page.append(button);
const myText = write.form.fieldset.value;
console.log(myText);
})
Related
How do I implement/execute where once I click the edit button it will allow the user to input a value then once submitted, the text in the li will render the updated value?
JS code block is written below:
P.S. You can ignore the other functions that are irrelevant.
P.S. I know, the edittask is incomplete but I'm not exactly sure how to implement the functionality I mentioned above.
const alertMsg = document.querySelector('.alert-message');
const inputForm = document.querySelector('.input-section');
const todoInput = document.querySelector('.todo-input');
const addBtn = document.querySelector('.add-btn');
const taskActions = document.querySelector('.task-actions');
const todosList = document.querySelector('.todos-list');
const deleteAllBtn = document.querySelector('.delete-all-btn');
const savedTodos = localStorage.getItem('todos');
let todos = [];
function displayTodos(newTodoObj){
const li = document.createElement('li');
li.id = newTodoObj.id;
li.className = 'task-container'
const task = document.createElement('span');
const checkBtn = document.createElement('button')
const editBtn = document.createElement('button')
const deleteBtn = document.createElement('button')
task.innerText = newTodoObj.text;
checkBtn.innerText = 'Check'
editBtn.innerText = 'Edit';
deleteBtn.innerText = 'Del';
checkBtn.addEventListener('click', (event) => {
const task = event.target.parentElement;
console.log(task);
task.classList.toggle('completed');
})
editBtn.addEventListener('click', editTask)
deleteBtn.addEventListener('click', deleteTask)
li.appendChild(task);
li.appendChild(checkBtn);
li.appendChild(editBtn);
li.appendChild(deleteBtn);
todosList.appendChild(li);
}
function editTask(event){
const li = event.target.parentElement.children[0].innerText;
todoInput.value = li;
}
function deleteTask(event){
const li = event.target.parentElement;
li.remove();
todos = todos.filter((todo) => todo.id !== parseInt(li.id));
saveTodos();
}
function handleTodoSubmit(event){
event.preventDefault();
const newTodo = todoInput.value;
todoInput.value = '';
const newTodoObj = {
text: newTodo,
id: Date.now(),
checked: false
};
todos.push(newTodoObj);
displayTodos(newTodoObj);
saveTodos();
}
function saveTodos(){
localStorage.setItem('todos', JSON.stringify(todos));
}
inputForm.addEventListener('submit', handleTodoSubmit);
if(savedTodos !== null){
const parsedTodos = JSON.parse(savedTodos);
parsedTodos.forEach(displayTodos);
}
window.addEventListener('beforeunload', saveTodos);
This code adds an input element to the DOM when the "Edit" button is clicked, sets its value to the text of the task, and adds an event listener that listens for the "Enter" key. When the "Enter" key is pressed, the code updates the text of the task and replaces the input element with a span element containing the updated text. It also updates the todos array and saves the updated array to local storage.
function editTask(event){
const li = event.target.parentElement;
const task = li.children[0];
const input = document.createElement('input');
input.value = task.innerText;
li.replaceChild(input, task);
input.focus();
input.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
const newTask = document.createElement('span');
newTask.innerText = input.value;
li.replaceChild(newTask, input);
const todoIndex = todos.findIndex((todo) => todo.id === parseInt(li.id));
todos[todoIndex].text = newTask.innerText;
saveTodos();
}
});
}
You can use this code in your existing JavaScript file by replacing the current editTask function with this one.
I don't know if I understood your question very well, but I hope it will at least help guide you. Or maybe it is the complete solution. Best wishes!
I have the following JavaScript code that is triggered once DOM is loaded:
const add_note = () => {
// Creates a new note and its props
const new_note = document.createElement("div");
const new_input = document.createElement("input");
const new_form = document.createElement("form");
const new_ol = document.createElement("ol");
const new_button = document.createElement("button");
//Populates the new note with inputs and checkboxes
for (let i = 0; i < 5; i++) {
let new_li = document.createElement("li");
let new_checkbox = document.createElement("input");
new_checkbox.setAttribute("type", "checkbox");
let new_li_input = document.createElement("input");
new_li_input.classList.add("li_input");
new_ol.appendChild(new_li);
new_li.appendChild(new_checkbox);
new_li.appendChild(new_li_input);
}
//New note's settings
new_note.setAttribute("id", "note");
new_note.classList.add("note");
new_note.appendChild(new_input);
new_input.classList.add("note_input");
new_input.setAttribute("placeholder", "Note's title");
new_note.appendChild(new_form);
new_form.appendChild(new_ol);
new_ol.setAttribute("id", "ol_id");
new_note.appendChild(new_button);
new_button.classList.add("more_items");
new_button.setAttribute("id", "more_items");
//Inserts the new note and button
const note_block = document.getElementById("notes");
note_block.appendChild(new_note);
const button = document.getElementById("more_items");
button.addEventListener("click", add_more_items);
button.innerHTML = "+";
};
However, once the notes are created, only the first note button inherits its functions as seen on the following image:
Code loaded
I've tried about everything I can but couldn't figure it out. Anyway thanks in advance.
IDs are unique in html, you can't have multiple elements with the same id
Either remove these lines, make them into classes, or somehow distinguish them:
new_note.setAttribute("id", "note");
...
new_ol.setAttribute("id", "ol_id");
...
new_button.setAttribute("id", "more_items");
And just refer to the button with the variable:
const note_block = document.getElementById("notes");
note_block.appendChild(new_note);
new_button.addEventListener("click", add_more_items);
new_button.innerHTML = "+";
You could actually even move these last two lines up to the rest of your code before appending the note block.
I have created a card structure based on results array fetched from API as:
results holds the list of fetched data
resultsDiv is an empty div to append all cards in it
created cards as :
results.forEach((pred, idx) => {
const card = document.createElement('div')
card.classList.add('card');
card.id = idx;
const image = document.createElement('img');
image.src = pred["image_path"]
image.classList.add('image-style')
card.append(image)
const info = document.createElement('h4')
info.innerText = 'Tenant ID: ' + pred["tenant_id"]
card.append(info)
resultsDiv.append(card)
const ol = document.createElement('ol')
pred['prediction'].forEach(p => {
const li = document.createElement('li')
const checkbox = document.createElement("INPUT");
checkbox.setAttribute("type", "checkbox");
li.innerText = p
li.appendChild(checkbox)
ol.appendChild(li)
})
card.append(ol)
const btn = document.createElement('button')
btn.innerText = 'Verify'
btn.classList.add('verify-btn')
const textarea = document.createElement('textarea')
textarea.placeholder = 'comments...'
card.append(btn)
card.append(textarea)
})
Now I want to get all the data that are selected on respective card on clicking its own button (each button i have added an event listener)
currently I am getting the values using closest this works but i think its not the appropriate way :
btn.addEventListener('click', () => {
const cardDiv = btn.closest('div');
const allElems = cardDiv.childNodes;
const imagePath = allElems[0].src; // image src
const comments = allElems[4].value; //
})
May I know any efficient way of getting the values as above , any guiding links or a solution would be much helpful
TIA
i move var liElement = document.createElement('li'); out side the function addTodo() to make this function work
function removeTodo(){
liElement.remove()
};
but now i have another problem that is i can't add more than one todo (li)
const input = document.getElementById('input');
const addBtn = document.getElementById('btn');
const todoList = document.getElementById('todoList');
var ulElement = document.createElement('ul');
var liElement = document.createElement('li');
let placeholderValue = '';
// This code is for clear placeholder value
input.addEventListener('focus' , () => {
placeholderValue = input.placeholder;
input.placeholder = '';
});
input.addEventListener('blur' , ()=> {
input.placeholder = placeholderValue;
});
// this function is for add to do to a list
function addTodo(){
todoList.appendChild(ulElement)
ulElement.appendChild(liElement);
liElement.classList.add('liElement')
liElement.innerHTML = input.value;
};
addBtn.addEventListener('click' , addTodo)
// this function is for remove todo from the list
function removeTodo(){
liElement.remove()
};
liElement.addEventListener('contextmenu' , (e) => {
e.preventDefault()
removeTodo()
});
You don't use createTextNode for example :
var t = document.createTextNode(input.value);
liElement.appendChild(t);
...and you have builded a very complex structure. Make it easier for yourself.
And finally
const todoList = document.getElementById('todoList');
var ulElement = document.createElement('ul');
why use to createElements ? you don't need these. You can create them in html file.
I am new to programming, and I don't quite grasp the idea of utilizing class constructor in real life. For instance, let's just say I am trying to create a DOM event handler so I can take user input and push it into CreateTodoList.todos array.
class CreateTodoList {
constructor(list) {
this.todoList = list;
this.todos = [];
}
Then let's just assume that I have built addTodo() function which takes text parameter where an user enters her/his todo.
addTodo(text) {
this.todos.push(text);
this.todoList.appendChild(CreateTodoList.addtoList(text));
}
Here, addtoList creates DOM element that takes value of the user input.
This addTodo function, then pushes the text parameter into the array I made in constructor, while also calling addtoList that makes the DOM element.
Now, let's say I click on "add" button where it takes user input value.
I will build an event handler that responds to click which will add user input to the todoList.
CreateTodoList.eventHandler('click', (e) => {
let userText.todos = document.querySelector(#userInput).value;
addTodo(userText);
})
I am trying to build an eventHandler here, so I can add user input to todoList, and have implemented this several times, but had no luck but receiving reference error.
Below is my full code.
/** #format */
const add = document.querySelector('#btn_add');
let addInput = document.querySelector('#add');
const form = document.querySelector('#form');
class CreateTodoList {
constructor(list) {
this.todoList = list;
this.todos = [];
}
addtoList(text) {
let checkboxEl = document.createElement('span');
checkboxEl.classList.add('round');
let checkboxEl2 = document.createElement('input');
checkboxEl2.id = 'checkbox';
checkboxEl2.type = 'checkbox';
let checkboxEl3 = document.createElement('label');
checkboxEl3.htmlFor = 'checkbox';
checkboxEl.appendChild(checkboxEl2);
checkboxEl.appendChild(checkboxEl3);
let todoTextEl = document.createElement('input');
todoTextEl.value = text;
todoTextEl.disabled = true;
todoTextEl.classList.add('edit_input');
todoTextEl.id = 'edit_input';
todoTextEl.type = 'text';
todoTextEl.name = 'edit_input';
let todoTextEl2 = document.createElement('label');
todoTextEl2.htmlFor = 'edit_input';
let editEl = document.createElement('i');
editEl.classList.add('far');
editEl.classList.add('fa-edit');
let deleteEl = document.createElement('i');
deleteEl.classList.add('far');
deleteEl.classList.add('fa-trash-alt');
let dateEl = document.createElement('small');
dateEl.textContent = timeago.format(new Date());
let liEl = document.createElement('li');
liEl.appendChild(checkboxEl);
liEl.appendChild(todoTextEl);
liEl.appendChild(todoTextEl2);
liEl.appendChild(editEl);
liEl.appendChild(deleteEl);
liEl.appendChild(dateEl);
let list = document.querySelector('ul');
list.appendChild(li);
return liEl;
}
removeFromList(text) {
let list = document.querySelector('ul');
let childs = Array.from(list.childNodes);
let removable = child.find((i) => i.innerText === text);
return item;
}
//todos 배열(todo 데이터에) text를 추가한다.
//todoList 에 liEL(리스트 엘레먼트) 를 append 한다.
addTodo(text) {
this.todos.push(text);
this.todoList.appendChild(CreateTodoList.addtoList(text));
}
removeTodo(text) {
let removed = this.todos.filter((el) => el !== text);
todo.todoList.removeChild(CreateTodoList.removeFromList(text));
this.todos = removed;
}
get getList() {
return this.todos;
}
}
class Handlers {}