I want to take the user input text from this div and input tag I've got:
<input id="title" placeholder="Title (Optional)">
<div class="editor" contenteditable></div>
The div is a rich text field that I've put in place of a regular textarea tag
and create a list item inside a <ul> tag.
Here is the javascript I've got, but is not working...
(works just fine with regular text area, but I get nothing with the rich text form)
/*------POST SUBMIT JS------*/
//target all necessary HTML elements
var ul = document.getElementById('list'),
removeAll = document.getElementById('removeAll'),
add = document.getElementById('add');
//make something happen when clicking on 'submit'
add.onclick = function(){
addLi(ul)
};
//function for adding items
function addLi(targetUl){
var inputText = document.getElementsByClassName('editor').value, //grab input text (the new entry)
header = document.getElementById('title').value, //grab title text
li = document.createElement('li'), //create new entry/li inside ul
content = document.createElement('div'),
title = document.createElement('div'),
removeButton = document.createElement('button'); //create button to remove entries
content.setAttribute('class','content')
title.setAttribute('class','title')
content.innerHTML = inputText;
title.innerHTML = header;
if (inputText.split(' ').join(' ').length === 0) {
//check for empty inputs
alert ('No input');
return false;
}
removeButton.className = 'removeMe'; //add class to button for CSS
removeButton.innerHTML = 'Delete'; //add text to the remove button
removeButton.setAttribute('onclick', 'removeMe(this);'); //creates onclick event that triggers when entry is clicked
li.appendChild(title); //add title textnode to created li
li.appendChild(content); //add content textnode to created li
li.appendChild(removeButton); //add Remove button to created li
targetUl.appendChild(li); //add constructed li to the ul
}
//function to remove entries
function removeMe(item){
var deleteConfirm = confirm('Are you sure you want to delete this entry?');
if (deleteConfirm){var parent = item.parentElement;
parent.parentElement.removeChild(parent)}
};
function checkRemoval(){
var entryConfirm = confirm('Are you sure you want to delete all entries?');
if (entryConfirm){
ul.innerHTML = '';
}
};
Here is the demo I'm working on
Here is the demo using a textarea tag
getElementsByClassName('editor') is going to return an array of elements with the class editor, so you can't just do .value, you need to get the first element in the array.
Also, since it's a div, I think you want to use textContent, so it'll look like this
var inputText = document.getElementsByClassName('editor')[0].textContent
for the input type you have to write following into your javascript:
var input_val = getElementsByClassName('title').value;
for the div you have to write following into your javascript:
var div_val = getElementsByClass('editor').value;
I hope this will work
Related
I have a to-do list which I want to be able to cross out tasks as they're completed, as well as delete them by clicking their corresponding "X" button.
I use global variable row which is added to different elements' ID. This is how I differentiate them from other task entries.
This works fine when deleting a task, but not when the checkbox is checked/unchecked. I want to toggle the add-strikethrough CSS class whenever a task's checkbox is clicked.
Relevant HTML:
<body>
<h1>To-Do-List</h1>
<form action="" onsubmit="createElements();return false" id="todo" autocomplete=off>
<input type="text" maxlength="25" id="enter-task" placeholder="Enter a Task">
<button type="button" id="submit-task" onClick="createElements()"><span>+</span></button>
</form>
<h4 class="hide" id="task-header">current tasks</h4>
<form class="hide" id="container">
<!--This is where the addTask elements go-->
</form>
<script src="script.js"></script>
</body>
Relevant CSS:
.add-strikethrough{
text-decoration: line-through;
text-decoration-color: black;
}
Javascript:
var row = 0;
function createElements(){
//create Checkbox
var checkbox = document.createElement("input");
checkbox.setAttribute("type", "checkbox");
checkbox.setAttribute("id", "entryCheckbox");
checkbox.setAttribute("value", "unchecked");
checkbox.setAttribute("onClick", "strikeTask(" + row +");")
//create label using value from input box
var label = document.createElement("label");
label.setAttribute("id", "entryLabel"+row);
label = document.getElementById("enter-task").value;
//create deleteTask img
var deleteTask = document.createElement("img");
deleteTask.src = "images/x.svg";
deleteTask.setAttribute("id", "delete-task");
deleteTask.setAttribute("onClick", "deleteRow(" + row +");")
addTask(checkbox, label, deleteTask);
}
//This function appends the elements
function addTask(box, label, x){
const tasks = document.getElementById("container");
const newTask = document.createElement('div');
newTask.classList.add('task-entries');
const header = document.getElementById('task-header');
//Makes sure input field is not empty
if(label !== ""){
//Show task container and header
if(tasks.classList.contains("hide")){
tasks.classList.replace('hide', 'task-container');
header.classList.replace('hide', 'show-header')
};
//Append newTask to tasks container
tasks.appendChild(newTask);
newTask.setAttribute("id", "contentDiv"+row);
newTask.appendChild(box);
newTask.appendChild(document.createTextNode(label));
newTask.appendChild(x);
row++;
//Resets input field after task is added
document.getElementById("enter-task").value = null;
}
}
function deleteRow(ID){
document.getElementById('contentDiv'+ID).remove();
tasks = document.getElementById('container');
header = document.getElementById('task-header');
//Hide header and task container if no tasks exist
if(tasks.children.length == 0){
tasks.classList.replace('task-container', 'hide');
header.classList.replace('show-header', 'hide');
}
}
function strikeTask(ID){
const x = document.getElementById('entryLabel'+ID);
x.classList.toggle('add-strikethrough');
}
The strikeTask function is where my problem is; I can't figure out how to apply the class to the label when I click the corresponding checkbox
I appreciate any help!
One way to check what is wrong is to inspect the element created. If you do that you will notice that you don't have a label within a div, only text within a div, because you create a text node with the value of the label, as seen here:
You cannot apply a class to a text node. So you have to create the label element, add text to the label element, then append it.
Here is updated Javascript that will do that:
var row = 0;
function createElements(){
//create Checkbox
var checkbox = document.createElement("input");
checkbox.setAttribute("type", "checkbox");
checkbox.setAttribute("id", "entryCheckbox");
checkbox.setAttribute("value", "unchecked");
checkbox.setAttribute("onClick", "strikeTask(" + row +");")
//create label using value from input box
var label = document.createElement("label");
label.setAttribute("id", "entryLabel"+row);
label.textContent = document.getElementById("enter-task").value;
//create deleteTask img
var deleteTask = document.createElement("img");
deleteTask.src = "images/x.svg";
deleteTask.setAttribute("id", "delete-task");
deleteTask.setAttribute("onClick", "deleteRow(" + row +");")
addTask(checkbox, label, deleteTask);
}
//This function appends the elements
function addTask(box, label, x){
const tasks = document.getElementById("container");
const newTask = document.createElement('div');
newTask.classList.add('task-entries');
const header = document.getElementById('task-header');
//Makes sure input field is not empty
if(label !== ""){
//Show task container and header
if(tasks.classList.contains("hide")){
tasks.classList.replace('hide', 'task-container');
header.classList.replace('hide', 'show-header')
};
//Append newTask to tasks container
tasks.appendChild(newTask);
newTask.setAttribute("id", "contentDiv"+row);
newTask.appendChild(box);
newTask.appendChild(label);
newTask.appendChild(x);
row++;
//Resets input field after task is added
document.getElementById("enter-task").value = null;
}
}
function deleteRow(ID){
document.getElementById('contentDiv'+ID).remove();
tasks = document.getElementById('container');
header = document.getElementById('task-header');
//Hide header and task container if no tasks exist
if(tasks.children.length == 0){
tasks.classList.replace('task-container', 'hide');
header.classList.replace('show-header', 'hide');
}
}
function strikeTask(ID){
const x = document.getElementById('entryLabel'+ID);
x.classList.toggle('add-strikethrough');
}
What I've changed: label = document.getElementById("enter-task").value; to label.textContent = document.getElementById("enter-task").value; inside createElements() & newTask.appendChild(document.createTextNode(label)); to newTask.appendChild(label); inside addTask(...).
The label is created as you were creating it; its text content is set to the value of the enter-task input; the element is appended.
What you were doing was create a label element and giving it an id, but on the following line (label = document.getElementById("enter-task").value;) changing the value of the label variable to a text, then adding that text as a text node (newTask.appendChild(document.createTextNode(label));).
I made a shopping list, now I want to strike through the items when I click on it.
When I click on it now, the whole li item gets striked through(the marker and the deletebutton gets striked through now).
I want to give the tekst in the list items I created in this script a class, but I can't get it working.
this is the script where the list items is made :
function createListElement() {
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
li.classList.add("tekstje");
ol.appendChild(li);
input.value = "";
var delBtn = document.createElement("BUTTON"); // Create a <button> element
delBtn.classList.add("deletebtn"); // Give a class name
delBtn.innerHTML = "X"; // Insert text
li.appendChild(delBtn); // Append <button> to <LI>
}
I tried the classlist.add method and giving it a P class, but that doesn't seem to work.
I also tried selecting it with :tekst
Override the CSS on the inner button. Or, just wrap the text within the li with a span and only add the strike through on the span.
var ol = document.getElementById("theOl");
var input = document.getElementById("theInput");
function createListElement() {
var li = document.createElement("li");
li.appendChild(document.createTextNode(input.value));
li.classList.add("tekstje");
ol.appendChild(li);
input.value = "";
var delBtn = document.createElement("BUTTON"); // Create a <button> element
delBtn.classList.add("deletebtn"); // Give a class name
delBtn.innerHTML = "X"; // Insert text
delBtn.onclick = function () {
delBtn.parentNode.classList.add("all-done");
}
li.appendChild(delBtn); // Append <button> to <LI>
}
.all-done {
text-decoration: line-through;
}
.all-done button {
text-decoration: none;
}
<ol id="theOl"></ol>
<input id="theInput" value="test">
<button onclick="createListElement()">Add</button>
Below is my code actually I wanted to set the li text into the input field when a user click on update button . The code is working input element is shown when user click on update button but the value which is in the li tag is not shown in the input filed but it is shown in the console I also attached the picture to clear this when I replace the input with a button
[function addTodo() {
// create li
var todo_input = document.getElementById('todo-input');
var li = document.createElement('li');
var textNode = document.createTextNode(todo_input.value);
li.setAttribute('class', 'li');
li.appendChild(textNode);
// create update button
var updateBtn = document.createElement('button');
var updateText = document.createTextNode('UPDATE');
li.appendChild(updateBtn);
li.appendChild(deleteBtn);
addList.appendChild(li);
}
function updateItem(e) {
var val1 = e.parentNode.firstChild;
var inputVal = document.createElement('input');
inputVal.setAttribute('class','todo-input');
inputVal.setAttribute('type','text');
var textNode = document.createTextNode(val1.nodeValue);
inputVal.appendChild(textNode);
}][1]
Don't append the text in the input box. Use the value attribute.
inputVal.value = val1.nodeValue;
I am trying to convert this HTML code to be generated by Javascript on the fly for live data.
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Ive found a few methods like: appendChild, getElementById, innerHTML and so on. Here is what I've tried so far. I can't seem to get the data to show up.
stringy = data2.Items[0].groupName.values[i];
var para = document.createElement("div");
var node = document.createTextNode(stringy);
para.appendChild(node);
var element = document.getElementById("parental");
element.appendChild(para);
//create div and give it a class
para.setAttribute('class', 'dropbtn');
var div = document.createElement("div");
div.setAttribute('class', 'dropdown-content');
para.parentNode.insertBefore(div, para.nextSibling);
//create link tags and give them text
var alinky = document.createElement("a");
alinky.setAttribute('id', 'linky');
document.getElementById('linky').innerHTML = "linky poo"
div.appendChild(alinky);
Hopefully someone could fill in the blanks on getting this HTML code to be reproduced with javascript. Thanks in advance!
EDIT:
I am trying to create a dropdown menu like this:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_hover
However, I am trying to create multiple dropdown menus, that dynamically change in quantity based on a query to DynamoDB (AWS). therefore I am using javascript to create the html tags.
The problem is that the scope of the query function does not allow me to see the data outside of the query function, or even inject data into it.
For example, if I try to get a button description from the query, and write to it descriptionArray[0] = data2.Items[0].description; so that I can append the button to the dropdown div, it doesn't know which iteration I'm on in the for loop due to scope. In this example, descriptionArray[0] will work, but descriptionArray[i] will not work because the for loop is outside the query.
Here is the entire logic:
//group data
var length = data2.Items[0].groupName.values.length;
// create elements
const dpdown1 = document.createElement('div');
// set dpdown1 class
dpdown1.setAttribute('class', 'dropdown');
console.log(dpdown1);
var button = new Array();
var dpdown2 = new Array();
var membersArray = new Array();
var descriptionArray = new Array();
var linksArray = new Array();
var stringy = new Array;
//list groups
for(i = 0; i<length; i++){
// create button, set button attribs
button[i] = document.createElement('button');
button[i].setAttribute('class','dropbtn');
//create dropdown div, set attributes
dpdown2[i] = document.createElement('div');
dpdown2[i].setAttribute('class', 'dropdown-content');
//list of group names
stringy[i] = data2.Items[0].groupName.values[i];
var stringyy = stringy[i];
var desc;
//query group members and description
var docClient1 = new AWS.DynamoDB.DocumentClient({ region: AWS.config.region });
var identityId = AWS.config.credentials.identityId;
var paramsyy = {
ExpressionAttributeValues: {
":v1": stringyy
},
KeyConditionExpression: "groupName = :v1",
TableName: "group"
};
docClient1.query(paramsyy, function(err, data2) {
if (err) {
console.error(err);
}else{
descriptionArray[0] = data2.Items[0].description;
//traverse members
for(k = 0; k<data2.Items[0].members.values.length; k++){
// create dropdown links of members
membersArray[k] = data2.Items[0].members.values[k];
linksArray[k] = document.createElement('a');
linksArray[k].setAttribute('href', '#')
linksArray[k].innerText = membersArray[k];
// nest into dpdown2 div, set dpdown2 attribs
dpdown2[0].appendChild(linksArray[k]);
}
}
});
button[i].innerText = stringyy + ": " + descriptionArray[0];
// nest into dpdown1
dpdown1.appendChild(button[i]);
dpdown1.appendChild(dpdown2[i]);
}
// append to DOM
const target = document.getElementById('target');
target.appendChild(dpdown1);
if I use the I from the first for loop inside the query function, it will give me undefined results.
here's how you can do it with vanilla JavaScipt, there are multiple ways to do it, but this way only uses 4 methods: createElement, setAttribute, appendChild, and getElementById, and directly sets 1 property: innerText.
// create elements
const dpdown1 = document.createElement('div');
const button = document.createElement('button');
const dpdown2 = document.createElement('div');
const link1 = document.createElement('a');
const link2 = document.createElement('a');
const link3 = document.createElement('a');
// set link attribs
link1.setAttribute('href', '#')
link1.innerText = 'Link 1';
link2.setAttribute('href', '#')
link2.innerText = 'Link 2';
link3.setAttribute('href', '#')
link3.innerText = 'Link 3';
// nest into dpdown2, set dpdown2 attribs
dpdown2.appendChild(link1);
dpdown2.appendChild(link2);
dpdown2.appendChild(link3);
dpdown2.setAttribute('class', 'dropdown-content');
// set button attribs
button.setAttribute('class','dropbtn');
button.innerText = "Dropdown"
// nest into dpdown1
dpdown1.appendChild(button);
dpdown1.appendChild(dpdown2);
// set dpdown1 class
dpdown1.setAttribute('class', 'dropdown');
// append to DOM
const target = document.getElementById('target');
target.appendChild(dpdown1);
<div id="target"></div>
You will to append it to something, in this example it's <div id="target"></div> but it could be something else.
Happy coding!
Mainly you are just doing things out of order.
Create the .dropdown <div> with its class.
Complete the .dropbtn <button> with its class and text.
Add the button to the div.
Create the .dropdown-content <div>.
Complete each link with its href attribute and text.
Add each link to the .dropdown-content <div>.
Add the .dropdown-content div to the .dropdown <div>.
Find the parent element in the document.
Append the whole complete .dropdown <div> to the document.
var para = document.createElement("div"); //make .dropdown div
para.setAttribute('class', 'dropdown'); //add .dropdown class to div
var button = document.createElement("button"); //create button
button.setAttribute('class', 'dropbtn'); //add .dropbtn class to button
var node = document.createTextNode('Dropdown'); //create button text
button.appendChild(node); //add text to button
para.appendChild(button); //add button to .dropdown div
var div = document.createElement("div"); //create .dropdown-content div
div.setAttribute('class', 'dropdown-content'); //add .dropdown-content class to div
//repeat for all necessary links
var alinky = document.createElement("a"); //creat link
alinky.setAttribute('href', '#'); //set link href attribute
var alinkyText = document.createTextNode("Link 1"); //create text for link
alinky.appendChild(alinkyText); //add text to link
div.appendChild(alinky); //add link to dropdown div
para.appendChild(div); //add .dropdown-content div to .dropdown div
var element = document.getElementById("parental"); //find parent element
element.parentNode.insertBefore(para, element.nextSibling); //add .dropdown div to the bottom of the parent element
<div id="parental">
</div>
// makes an li inside of a ol when a button is pressed
function addLi() {
var txtVal = document.getElementById('txtVal').value,
listNode = document.getElementById('list'),
liNode = document.createElement("li"),
txtNode = document.createTextNode(txtVal);
liNode.appendChild(txtNode);
listNode.appendChild(liNode);
};
function addoutp() {
};
I don't know what to put inside this function to move the inputted text over to another part of the screen separately...
You were very close. Just adding some HTML that matches your selectors in the JS code and it started working. I also added a check to make sure there was a value before adding to the list and also a reset to clear the input value after the text gets added to the list (txtVal.value = '';).
// makes an li inside of a ol when a button is pressed
function addLi() {
var txtVal = document.getElementById('txtVal'),
listNode = document.getElementById('list'),
liNode = document.createElement("li"),
txtNode = document.createTextNode(txtVal.value);
if (txtVal.value) {
liNode.appendChild(txtNode);
listNode.appendChild(liNode);
// clear the input
txtVal.value = '';
}
};
<input id="txtVal" type="text" />
<button onclick="addLi()">Add to list</button>
<ol id="list"></ol>