I'm trying to create a new li element using a text input. The problem is while the text is appearing, it doesn't to create an actual li element that I can style. The text is there, but it just forms right next to each other in a row. Here is my html:
const button = document.getElementById('submit');
button.addEventListener ("click", () => {
var taskInput = document.getElementById('task').value;
// Creating the text for list item.
if (taskInput === '') { // Prevents empty list item.
alert("You have to type a task!");
} else {
var listItem = document.createElement("li"); // Create li element.
var text = document.createTextNode(taskInput); // Create text for list item.
listItem.appendChild(text); // Append text to li element.
}
//Add new list item to list
var list = document.getElementById("list");
list.appendChild(text);
});
<body>
<h1>Start your list!</h1>
<div class="input">
<input type="text" id="task">
<button id="submit">Create</button>
</div>
<section id="list">
</section>
</body>
just use <ul> instead of <section> and append to it listeItem and not text.
const button = document.getElementById('submit');
button.addEventListener ("click", () => {
var taskInput = document.getElementById('task').value;
// Creating the text for list item.
if (taskInput === '') { // Prevents empty list item.
alert("You have to type a task!");
} else {
var listItem = document.createElement("li"); // Create li element.
var text = document.createTextNode(taskInput); // Create text for list item.
listItem.appendChild(text); // Append text to li element.
}
//Add new list item to list
var list = document.getElementById("list");
list.appendChild(listItem);
});
<body>
<h1>Start your list!</h1>
<div class="input">
<input type="text" id="task">
<button id="submit">Create</button>
</div>
<ul id="list">
</ul>
</body>
You are appending text you need to append listItem. Check this out:
Your code:
list.appendChild(text);
How it should be:
list.appendChild(listItem);
Best!
<section>: Used to either group different articles into different purposes or subjects, or to define the different sections of a single article. ref for more info
You can add the created list element to this <section> <ol> <li> tags at different possible positions as show below.
var listItem = document.createElement("li"); // Create li element.
listItem.innerHTML = `taskInput`;
var list = document.getElementById("sectionlist");
list.appendChild(listItem);
const button = document.getElementById('submit');
button.addEventListener ("click", () => {
var taskInput = document.getElementById('task').value;
if (taskInput !== '') {
var listItem = document.createElement("li"); // Create li element.
listItem.innerHTML = taskInput;
var val = $("input[name='Radios']:checked").val();
var list = document.getElementById("sectionlist");
// https://stackoverflow.com/a/13166249/5081877
var listCount = $("#sectionlist li").length;
var xpath = '//section/ol/li['+listCount+']';
if( val == "Option 1") {
list.appendChild(listItem);
} else if ( val == "Option 2" ) {
var element = document.evaluate(xpath, window.document, null, 9, null ).singleNodeValue;
list.insertBefore(listItem, element);
} else if ( val == "Option 3" ) {
// https://stackoverflow.com/a/2470148/5081877
var newElem = new XMLSerializer().serializeToString(listItem);
list.insertAdjacentHTML('afterbegin', newElem);
}
} else {
alert("You have to type a task!");
}
});
body {margin: 2em; font-family: Arial, Helvetica, sans-serif;}
span {
/* style this span element so we can display nicely, this stlying is not neccessary */
margin: 10px 0;
display: block;
width: 100%;
float: left;
}
input[type="radio"] {
/* hide the inputs */
opacity: 0;
}
/* style your lables/button */
input[type="radio"] + label {
/* keep pointer so that you get the little hand showing when you are on a button */
cursor: pointer;
/* the following are the styles */
padding: 4px 10px;
border: 1px solid #ccc;
background: #efefef;
color: #aaa;
border-radius: 3px;
text-shadow: 1px 1px 0 rgba(0,0,0,0);
}
input[type="radio"]:checked + label {
/* style for the checked/selected state */
background: #777;
border: 1px solid #444;
text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<body>
<div id="myFORM">
<h3>Insert Element into the DOM tree at a specified position.</h3>
<span>
<input id="Radio1" name="Radios" type="radio" value="Option 1" checked="checked">
<label for="Radio1">Node.appendChild() - Insert as END Ele.</label>
</span>
<span>
<input id="Radio2" name="Radios" type="radio" value="Option 2" >
<label for="Radio2">Node.insertBefore() - Insert as Last but one Ele.</label>
</span>
<span>
<input id="Radio3" name="Radios" type="radio" value="Option 3" >
<label for="Radio3">Element.insertAdjacentHTML() - Insert as Start Ele.</label>
</span>
</div>
<h1>Start your list!</h1>
<div class="input">
<input type="text" id="task">
<button id="submit">Create</button>
</div>
<section id="list">
<ol id="sectionlist">
<li>Default list Data</li>
</ol>
</section>
</body>
For more information regarding inserting element you can refer my previous post.
#See
Element.insertAdjacentElement()
Element.insertAdjacentHTML()
Node.appendChild()
Node.insertBefore()
Related
I am not sure how you go about styling a data attribute made in javascript.
const createTask = () => {
const id = createId()
const task = elements.input.value;
const date = elements.cal.value;
if(!task && !date) return alert("Please fill in task and select date");
if(!task) return alert("Please fill in task");
if(!date) return alert("Please select date");
const tasks = document.createElement("div");
tasks.innerHTML = `
<div class="task" date-id = "${id}">
<div class="content">
<input type ="checkbox" class="tick">
<input type ="text" class = text id = "text" data-id="" readonly>${task}
<label class = "due-date" for ="text">${date}</label>
<input type ="date" class = date id = "date">
</div>
<div class = "actions">
<button class="edit" data-id="${id}>Edit</button>
<button class="delete" data-id="${id}>Delet</button>
</div>
</div>
`
elements.list.appendChild(tasks)
return tasks
}
What I am trying to style is the data-id="${id} for the edit and delete button. I did style the class edit and delete in CSS
CSS:
.task .actions .edit {
background-image: linear-gradient(to right, var(--pink), var(--purple));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.task .actions .edit
{
font-size: 0.8rem;
margin-left: 3rem;
margin-top: 1rem;
}
.task .actions .delete {
color: crimson;
}
That data-id="${id} is preventing the buttons from appearing, but I need it there as it tracks with the list ID and it can delete or edit the list.
I am currently making use of the following code which helps me in hiding and displaying the choices. But I am unable to hide and unselect them if choice 1 is unchecked.
var x= jQuery("#"+this.questionId+" input[choiceid=2]").closest("li").hide();
var y = jQuery("#"+this.questionId+" input[choiceid=3]").closest("li").hide();
this.questionclick = function(event, element) {
var selectedChoice = this.getSelectedChoices()
console.log(selectedChoice) //use this to get the value of the choice when you want the textbox to appear
if (selectedChoice == "1") {
x.show();
y.show();
alert(selectedChoice);
}
else if (selectedChoice == "2") {
//x.hide();
//y.hide();
alert(selectedChoice+"Else if");
}
else{
x.hide();
y.hide();
alert(selectedChoice+"Else ");
}
}
Some help would be greatly appreciated
Your question does not contain html that you are using. Here is a small demo I have created to demonstrate the grouped checkboxes and binding on click event with them. Play and do changes as per your need.
https://stackblitz.com/edit/grouped-checkboxes-binding-onclick-function
this keyword inside the function refers to the checkbox clicked. you can further checks as you do on normal html checkbox element. e.g this.checkedmeans document.getElementById("myCheck").checked to check if checkbox is checked or not.
HTML
<div class="question">
<h2 class="q-1">Click to write the Question text</h2>
</div>
<ul class="options-list" id="options-list">
<li>
<label>
<input type="checkbox" id="q1-opt1" name="q1['opt1']">
Click to write choice 1
</label>
</li>
<li>
<label>
<input type="checkbox" id="q1-opt2" name="q1['opt2']">
Click to write choice 2
</label>
</li>
<li>
<label>
<input type="checkbox" id="q1-opt3" name="q1['opt3']">
Click to write choice 3
</label>
</li>
<li>
<label>
<input type="checkbox" id="q1-opt4" name="q1['opt4']">
Click to write choice 4
</label>
</li>
</ul>
CSS
.options-list {
list-style-type: none;
margin: 0;
padding: 0;
}
.options-list li label {
display: block;
background: #ddd;
border-radius: 8px;
padding: 10px 20px;
margin: 0 0 10px;
cursor: pointer;
}
.options-list li label:hover {
background: #ccc;
}
.options-list li label > input {
display: none;
}
JS
(function() {
// get questions that you want to disable enable
var q1opt1 = document.getElementById("q1-opt2");
var q1opt2 = document.getElementById("q1-opt3");
// get list wrapping element of all checkboxes
var el = document.getElementById('options-list');
// get all checkboxes inside wrapping element
var options = el.getElementsByTagName('input');
// assign a function each checkbox on click
for( var i=0, len=options.length; i<len; i++ ) {
if ( options[i].type === 'checkbox' ) {
options[i].onclick = function(e) {
// if checkbox id is q1-opt1
// and is checked is checking if this is selected.
// checkbox is hidden with css
// play with the code
if ( this.id == 'q1-opt1' && this.checked ) {
q1opt1.parentElement.style.display = "none";
q1opt2.parentElement.style.display = "none";
} else {
q1opt1.parentElement.style.display = "block";
q1opt2.parentElement.style.display = "block";
}
}
}
}
})();
Aim was to take input and create radio buttons and label dynamically like a list which when checked goes to bottom while label name coming from the input textfield that we write. I was able to do this with the radio button but not with the label. Please help me out I'm new here.
[Fiddle] (http://jsfiddle.net/wju6t7k3/2/)
<div id = "container" >
<div class="row">
<div class="col-12">
<input id = "txt" type = "text" placeholder="Add new.." >
<button id="btn" value = "add" type = "button" onClick = "add()" >
</button>
</div>
<div id="done" class="col-12">
</div>
</div> <!-- row -->
<script>
//js
var j = 0;
var textval="";
function getInputValue(){
// Selecting the input element and get its value
inputVal = document.getElementById("txt").value;
// Displaying the value
alert(inputVal);
}
function add() {
if (document.getElementById('txt').value != '') {
j++;
var title = document.getElementById('txt').value;
var node = document.createElement('div');
node.innerHTML = '<input type="checkbox" class="checkbox-round" id="check' + j + '" name="check' + j + '"><label for="check' + j + '">' + title + '</label>';
document.getElementById('done').appendChild(node);
}
}
input = document.getElementById("txt");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
document.getElementById("btn").click();
textval =this.value;
onfocus=this.value='';
}
});
function countChecked(event) {
alert(textval);
alert("balle");
getInputValue();
$(this).parent().parent().append(this).append('<label>textvalh</label>').append('<br>');
}
$("#container").on( "click", "input[type=checkbox]", countChecked );
function getForm(event) {
event.preventDefault();
var form = document.getElementById("task").value;
console.log(form);
}
</script>
You have to make a container or a parent element for the checkbox and its label to have more control of it.
and if you want to separate the checkbox that is checked, then make another div element to make a separation.
Here's an example, this is based on your code:
//js
var j = 0;
function add() {
if (document.getElementById('txt').value != '') {
j++;
var title = document.getElementById('txt').value;
var node = document.createElement('div');
node.innerHTML = '<div><input type="checkbox" class="checkbox-round" id="check' + j + '" name="check' + j + '"><label for="check' + j + '">' + title + '</label></div>';
document.getElementById('done').appendChild(node);
}
}
input = document.getElementById("txt");
input.addEventListener("keyup", function(event) {
if (event.keyCode === 13) {
document.getElementById("btn").click();
textval = this.value;
this.value='';
}
});
function countChecked(event) {
const isChecked = event.currentTarget.checked;
// Get parent of checkbox which is the closest <div> element
const checkbox_parent = $(event.currentTarget).closest('div');
if (isChecked) // Move element to div with ID = selected
checkbox_parent.appendTo('#selected')
else // Move element to div with ID = done
checkbox_parent.appendTo('#done')
}
$('#container').on('change', 'input[type="checkbox"]', countChecked)
input, input:active{
border:none;
cursor: pointer;
outline: none;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: blue;
}
::-moz-placeholder { /* Firefox 19+ */
color: blue;
}
:-ms-input-placeholder { /* IE 10+ */
color: blue;
}
:-moz-placeholder { /* Firefox 18- */
color: blue;
}
button{
display:none;
}
.checkbox-round {
width: 1.3em;
height: 1.3em;
background-color: white;
border-radius: 50%;
vertical-align: middle;
border: 1px solid #ddd;
-webkit-appearance: none;
outline: none;
cursor: pointer;
}
.checkbox-round:checked {
background-color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container" >
<div class="row">
<div class="col-12" style="border: dashed red 3px;">
<input id = "txt" type="text" placeholder="Add new.." />
<button id="btn" value="add" type="button" onClick ="add()">Add</button>
<div id="done" class="col-12" style="border: solid purple 3px;">
</div>
<div id="selected" class="col-12" style="border: solid gray 3px;">
</div>
</div>
</div> <!-- row -->
</div>
Happy Coding!
I have a simple function that is supposed to check if an element has a class. If it doesnt have the class, it should add the class. It should also iterate through all other elements in the series, and deselect them. So only 1 element should be shown at any time. I have looked at this, this, this and this as well as a bunch of others. I know the function should be simple, but I just cant resolve it.
const changeFilter = (itemNumber) => {
// grab element that has been clicked
let selector = document.getElementsByClassName(itemNumber);
// check if element doesnt has the class name that underlines it
if (!selector[0].classList.contains("darken-filter-selector")) {
// add the class if it doesnt have it
selector[0].classList.add("darken-filter-selector")
} else {
// iterate through all the elements, check if it has the class
// remove it if it doesnt have the class
for (let i = 0; i < 7 ; i++) {
if(i !== itemNumber) {
return selector[i].classList.contains("darken-filter-selector") ? selector[0].classList.remove("darken-filter-selector"):null
}
}
}
};
And it should not look like this (what is currently happening)
but rather should only allow for one selected element at a time...
The simplest way is to store the previous itemNumber into global variable like previousItemNumber.
Set the initial value of previousItemNumber to -1 (lower than 0) so that it can be used on changeFilter function.
And on changeFilter function, first, you check if previousItemNumber is existed or not (in other words, already selected item is existed or not when selecting new item) and if existed, remove the className there.
Add the className for the selected item and set the current itemNumber to previousItemNumber.
let previousItemNumber = -1;
const changeFilter = (itemNumber) => {
// grab element that has been clicked
let selector = document.getElementsByClassName(itemNumber);
if (previousItemNumber === itemNumber) {
return;
}
// Remove the class from previous selector
if (previousItemNumber >= 0) {
selector[previousItemNumber].classList.remove("darken-filter-selector");
}
selector[itemNumber].classList.add("darken-filter-selector");
previousItemNumber = itemNumber;
};
You can achieve the desired using input type="checkbox" and a bit of JS:
const EL_checkboxesOne = document.querySelectorAll(".checkboxesOne");
const checkboxesOne = (EL_group) => {
const inputs = EL_group.querySelectorAll('[type="checkbox"]');
EL_group.addEventListener("input", (ev) => {
[...inputs].filter(EL => EL !== ev.target).forEach(EL => EL.checked = false);
});
};
EL_checkboxesOne.forEach(checkboxesOne);
.checkboxesOne {
display: flex;
font: bold 16px/1.4 sans-serif;
color: #666;
}
.checkboxesOne input {
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
clip: rect(0 0 0 0);
clip-path: inset(100%);
}
.checkboxesOne span {
padding: 10px 0;
margin: 0 10px;
user-select: none;
cursor: pointer;
}
.checkboxesOne input:checked + span {
box-shadow: 0 4px green;
}
<div class="checkboxesOne">
<label><input type="checkbox" name="filter" value="all"><span>ALL</span></label>
<label><input type="checkbox" name="filter" value="new"><span>NEW</span></label>
<label><input type="checkbox" name="filter" value="wip"><span>WIP</span></label>
<label><input type="checkbox" name="filter" value="hot"><span>HOT</span></label>
<label><input type="checkbox" name="filter" value="won"><span>WON</span></label>
<label><input type="checkbox" name="filter" value="lost"><span>LOST</span></label>
<label><input type="checkbox" name="filter" value="dnc"><span>DNC</span></label>
</div>
I went with this function, as I thought it was the easiest and required the least modification from my original function
const changeFilter = (itemNumber) => {
// grab element that has been clicked
let selector = document.getElementsByClassName(itemNumber);
// check if element doesnt has the class name that underlines it
if (!selector[0].classList.contains("darken-filter-selector")) {
// add the class if it doesnt have it
selector[0].classList.add("darken-filter-selector");
}
// iterate through all the elements, check if it has the class
// remove it if it doesnt have the class
for (let i = 0; i < 7; i++) {
if (i !== itemNumber) {
let otherEls = document.getElementsByClassName(i);
if (otherEls[0].classList.contains("darken-filter-selector")) {
otherEls[0].classList.remove("darken-filter-selector");
}
}
}
};
This is my suggestion. It uses Event Delegation. Change the style as you like.
options.onclick = function(e) {
if (e.target.tagName != "LI") return;
var selected = options.querySelector(".active");
if (selected) {
selected.removeAttribute("class");
}
e.target.setAttribute("class", "active");
console.log(e.target.dataset.option);
};
#options {
display: flex;
justify-content: center;
}
#options li {
margin: 0 10px 0 10px;
padding: 10px;
cursor: pointer;
list-style: none;
}
#options li.active {
background-color: green;
pointer-events: none;
border-radius: 5px;
}
<ul id="options">
<li data-option="all">ALL</li>
<li data-option="new">NEW</li>
<li data-option="wip">WIP</li>
<li data-option="hot">HOT</li>
<li data-option="won">WON</li>
<li data-option="lost">LOST</li>
<li data-option="dnc">DNC</li>
</ul>
You can also do without using Data Attribute (data-option="..."): just use e.target.innerHTML.
I have a bunch of input elements and with javascript on click i'm getting the values of these inputs and paste it in a div somewhere
Please run the code snipped below to check
$('#getthelist').click(function() {
$('.inputs>li .color').map(function() {
return {
name: this.closest('[id]').id,
value: $(this).val()
}
}).get().forEach(function(e) {
$('.list').append('<div>' + '\"' + e.name + '\": \"' + e.value + '\",</div>');
});
});
ul,li {
list-style: none;
margin: 0;
padding: 0;
}
.list {
margin: 10px;
width: 270px;
padding: 25px;
background-color: #fafafb;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="color_white">
<ul class="inputs">
<input type="radio" value="getthelist" id="getthelist"> Click to get the color values
<li id="color_white">
<div>
<input type="text" value="#fff" class="color">
</div>
</li>
<li id="color_black">
<div>
<input type="text" value="#000" class="color">
</div>
</li>
</ul>
<div class="list"></div>
So i have got one question and a problem i cant figure out how to fix.
The problem is, each time you click the button it pastes the values in the div repeatedly. It is a mess to me for what i'm trying to do. so, How do i force it not to repeat the same values when you click every time.
Question: How do i copy the input values to clipboard with the same click function?
Please check my snippet codes.
function copyToClipboad(texts) {
var textareaElCloned = $('<textarea>' + texts + '</textarea>');
$('.list').append(textareaElCloned);
/* Select the text field */
textareaElCloned[0].select();
/* Copy the text inside the text field */
document.execCommand("copy");
}
$('#getthelist').click(function() {
var html = '';
var texts = '';
var itemEls = $('.inputs > li .color');
itemEls.map(function() {
return {
name: this.closest('[id]').id,
value: $(this).val()
}
}).get().forEach(function(e, index) {
var text = '\"' + e.name + '\": \"' + e.value + '\",';
texts += text;
html += ('<div>' + text + '</div>');
if (index === itemEls.length-1) {
copyToClipboad(texts);
}
});
$('.list').html(html); // the textarea will be removed at this moment
});
ul,li {
list-style: none;
margin: 0;
padding: 0;
}
.list {
margin: 10px;
width: 270px;
padding: 25px;
background-color: #fafafb;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="color_white">
<ul class="inputs">
<input type="radio" value="getthelist" id="getthelist"> Click to get the color values
<li id="color_white">
<div>
<input type="text" value="#fff" class="color">
</div>
</li>
<li id="color_black">
<div>
<input type="text" value="#000" class="color">
</div>
</li>
</ul>
<div class="list" tabindex="1"></div>
save your data in localStorage.setItem (return value of .map must save in localstorage)
get your data with localStorage.getItem (get data from localstorage with key that you set for item)
create a template with handlebar.js, and when click on checkbox, render template with data that get from localstorage.
for new data, you must update localstorage.
I have tested the solution from Dipak chavda but it does not work for me also. The problem is that the input is type of hidden. So I changed it to hidden textarea. When you try to copy, I make it visible for a while, focus it, select it's value and then exec the copy. And it works ;)
function copyData(copyText) {
var $txtCopyArea = $("#txtCopyArea");
// set the text as value
$txtCopyArea.val(copyText);
// make textarea visible
$txtCopyArea.removeClass('hidden');
/* focus & select the text field */
$txtCopyArea.focus().select();
/* Copy the text inside the text field */
document.execCommand("copy");
/* Alert the copied text */
alert("Copied the text: " + copyText);
// hide textarea
$txtCopyArea.addClass('hidden');
}
$('#getthelist').click(function() {
// Clear html div content
$('.list').html("");
var copyText = "";
$('.inputs>li .color').map(function() {
return {
name: this.closest('[id]').id,
value: $(this).val()
}
}).get().forEach(function(e) {
var _data = '<div>' + '\"' + e.name + '\": \"' + e.value + '\",</div>';
$('.list').append(_data);
copyText += _data;
});
copyData(copyText);
});
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
.list {
margin: 10px;
width: 270px;
padding: 25px;
background-color: #fafafb;
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="color_white">
<ul class="inputs">
<input type="radio" value="getthelist" id="getthelist"> Click to get the color values
<li id="color_white">
<div>
<input type="text" value="#fff" class="color">
</div>
</li>
<li id="color_black">
<div>
<input type="text" value="#000" class="color">
</div>
</li>
</ul>
<textarea id="txtCopyArea" class="hidden"></textarea>
<div class="list"></div>
I tried to give you both questions answer.
Answer of Q1
you should reset HTML content before set new value.
Answer of Q2
you should use document.executeCommand("copy") to copy the text.
Hope it may help to resolve your issue.
function copyData(copyText) {
$("body").append($("<textarea/>").val(copyText).attr({id:"txtareaCopyData"}));
var copyText = document.querySelector("#txtareaCopyData");
copyText.select();
document.execCommand("copy");
$("#txtareaCopyData").remove();
}
$('#getthelist').click(function() {
// Clear html div content
$('.list').html("");
var copyText = "";
$('.inputs>li .color').map(function() {
return {
name: this.closest('[id]').id,
value: $(this).val()
}
}).get().forEach(function(e) {
var _data = '<div>' + '\"' + e.name + '\": \"' + e.value + '\",</div>';
$('.list').append(_data);
copyText += _data;
});
copyData(copyText);
document.querySelector("#txtCopyArea").addEventListener("click", copyData);
});
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
.list {
margin: 10px;
width: 270px;
padding: 25px;
background-color: #fafafb;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li id="color_white">
<ul class="inputs">
<input type="radio" value="getthelist" id="getthelist"> Click to get the color values
<li id="color_white">
<div>
<input type="text" value="#fff" class="color">
</div>
</li>
<li id="color_black">
<div>
<input type="text" value="#000" class="color">
</div>
</li>
</ul>
<input type="hidden" id="txtCopyArea" name="txtCopyArea" />
<div class="list"></div>