In console, am getting undefined, but I can't understand.
JS Fiddle
function createItem(element) {
var li = document.createElement('li');
li.innerText = element.value;
var ul = document.getElementById('todo');
ul.appendChild(li);
}
var element = document.getElementById("input")
document.getElementById("submit").onclick = createItem;
console.log(element);
Based on your fiddle, the form is being submitted, in order to prevent that in the below code I have used the event.preventDefault, and then you need to pass the element parameter to the createItem function.
function createItem(element) {
var li=document.createElement('li');
li.innerText=element.value;
var ul=document.getElementById('todo');
ul.appendChild(li);
}
var element = document.getElementById("input");
document.getElementById("submit").onclick=function(e){
event.preventDefault();
createItem(element);
};
try this :)
function createItem(element) {
var li = document.createElement('li');
li.innerText = document.getElementById("input").value;
var ul = document.getElementById('todo');
ul.appendChild(li);
}
var element = document.getElementById("input")
document.getElementById("submit").onclick = createItem;
console.log(element);
<ul id="todo">
</ul>
<input id="input" >? </input>
<button id="submit" />
Related
I'm trying to get my button for my To-do list to work for days now.. The button is not working but I can't figure out what the problem is. I don't want to use "onclick" in the html file I want to do the click event in the javascript file.
And then I have been trying to figure out how to get the To-do list to work with adding new tasks and being able to mark the task complete without removing it but it was harder than i thought.. I'd love to get some pointers! Appreciate it guys
var closebtn = document.getElementsByClassName("close");
function todolist(){
var li = document.createElement('li');
var btn = document.getElementById('my-button').onclick = function(){
var list = document.getElementById('list');
var input = document.getElementById('task').value;
var func = addEventListener('my-button');
var textnode = documentcreateTextNode(input);
li.appendChild(textnode);
if (input === ' '){
alert("write")
} else {
document.getElementById(list).appendChild(li);
}
document.getElementById('task').value = " ";
var thePanTag = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
thePanTag.className = "close";
thePanTag.appendChild(txt);
li.appendChild(thePanTag);
for (i = 0; i < closebtn.length; i++){
closebtn[i].onclick = function(){
var Div = this.parentElement;
Div.style.display = none;
}}}}
<body>
<h2>To-do list!</h2>
<div>
<input type="text" id="task" placeholder="Write task" />
<button id="my-button">Add task</button>
</div>
<ul id="list">
<li>kaa</li>
<li>baa</li>
<li>ss</li>
<li>aa</li>
<li>aaa</li>
</ul>
I removed the unnecessary code and be aware of using the correct onlick function.
Try this:
var closebtn = document.getElementsByClassName("close");
todolist();
function todolist(){
var li = document.createElement('li');
var btn = document.getElementById('my-button').onclick = function(){
var ul = document.getElementById("list");
var li = document.createElement("li");
var input = document.getElementById('task').value;
if(input!=''){
li.appendChild(document.createTextNode(input));
ul.appendChild(li);
}
}
}
<h2>To-do list!</h2>
<div>
<input type="text" id="task" placeholder="Write task" />
<button id="my-button">Add task</button>
</div>
<ul id="list">
<li>kaa</li>
<li>baa</li>
<li>ss</li>
<li>aa</li>
<li>aaa</li>
</ul>
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.
Can someone tell me what the best way to achieve the same thing seen here with this js:
function ContactController($scope) {
$scope.contacts = ["hi#me.no", "hi#you.com"];
$scope.addMail = function() {
if(this.mailAdress) {
$scope.contacts.push($scope.mailAdress);
$scope.mailAdress = "";
}
};
}
without the use of Angular. I am just trying to learn how save user input to the DOM using javascript. Thanks!
One way of doing the same is
var contacts = ["hi#me.no", "hi#you.com"],
ul = document.querySelectorAll('.email-list')[0];
// Iterate over the contacts and append it to the ul
for (var i = 0; i < contacts.length; i++) {
addEmailToContacts(contacts[i]);
}
function addEmailToContacts(contact) {
var li = document.createElement('li');
li.innerHTML = contact;
ul.appendChild(li);
};
// Click event for the submit
document.querySelector('#submit').addEventListener('click', function(e) {
e.preventDefault();
// Get the value
var value = document.querySelectorAll('input[type="mail"]')[0].value;
if (value) {
addEmailToContacts(value);
}
})
Check Codepen
You can use form element, input type="email" element with required attribute, onsubmit event, event.preventDefault(), Array.prototype.push() , Array.prototype.forEach(), .innerHTML
var contacts = ["hi#me.no", "hi#you.com"],
div = document.getElementById("update");
function updateContacts() {
div.innerHTML = "";
contacts.forEach(function(address) {
div.innerHTML += address + "<br>"
})
}
updateContacts();
document.forms[0].onsubmit = function(event) {
event.preventDefault();
// user input to update `contacts` array
contacts.push(this["input"].value);
// display updated `contacts` array
updateContacts();
}
<div id="update">
</div>
<form>
<input name="input" type="email" required />
<input type="submit" />
</form>
I'm trying to create a todo list with JS. The idea is to write something in the input and when the user clicks the button, he obtains a checkbox with the text on it.
The problem is that I don't know how can I do it with JS. I tried to change the 'li' to an input and then setAttribute("type", "checkbox"), but nothing happened.
<!DOCTYPE html>
<html>
<head>
<title>Lista de tareas personal.</title>
<meta charset='utf-8'>
<style type="text/css">
body{
font-family: Helvetica, Arial;
}
li{
width: 50%;
list-style-type: none;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Lista de tareas personal.</h1>
<hr>
<br>
<button type="button" id="btn" onclick="añadirItems">Añadir Item</button>
<input type="text" id="texto">
<!---<ul id="lista"> </ul>-->
<ul id="ul"> </ul>
<script type="text/javascript">
function addItem(){
var ul = document.getElementById('ul'); //ul
var li = document.createElement('li');//li
var text = document.getElementById('texto');
li.appendChild(document.createTextNode(text.value));
ul.appendChild(li);
}
var button = document.getElementById('btn');
button.onclick = addItem
</script>
</body>
</html>
Any suggestions?
You don't seem to use jquery, so the jquery tag wont get you helpful answers.
You can create a checkbox in the same way you created your li element.
function addItem(){
var ul = document.getElementById('ul'); //ul
var li = document.createElement('li');//li
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.value = 1;
checkbox.name = "todo[]";
li.appendChild(checkbox);
var text = document.getElementById('texto');
li.appendChild(document.createTextNode(text.value));
ul.appendChild(li);
}
var button = document.getElementById('btn');
button.onclick = addItem;
http://jsfiddle.net/u7f5rwjs/1/
You can create dynamic checkbox like
$('#containerId').append('<input type="checkbox" name="myCheckbox" />');
where containerId is the id of the DOM element you want to add the checkbox to.
Or alternative syntax...
$('#containerId')
.append(
$(document.createElement('input')).attr({
id: 'myCheckbox'
,name: 'myCheckbox'
,value: 'myValue'
,type: 'checkbox'
})
);
For more information See the following link: create dynamically radio button in jquery
Here it is showing how to create radio button using jQuery, you can change the code to create Checkbox.
As per your requirement :
function addItem(){
var ul = document.getElementById('ul'); //ul
var li = document.createElement('li');//li
var text = document.getElementById('texto');
li.appendChild( $(document.createElement('input')).attr({
id: 'myCheckbox'
,name: 'myCheckbox'
,value: 'myValue'
,type: 'checkbox'
}));
ul.appendChild(li);
}
var button = document.getElementById('btn');
button.onclick = addItem
You can read this question: Creating the checkbox dynamically using javascript?
Just add the part of the checkbox in your code:
function addItem(){
var ul = document.getElementById('ul'); //ul
var li = document.createElement('li');//li
var text = document.getElementById('texto');
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "name";
checkbox.value = "value";
checkbox.id = "id";
li.appendChild(checkbox);
li.appendChild(document.createTextNode(text.value));
ul.appendChild(li);
}
And the fiddle:
http://jsfiddle.net/8uwr3kpw/
I have a html document which looks like this:
...html code...
<ul id="my_ul">
...html code...
Using javascript I want to insert the html code below inside the document, immediately after <ul id="my_ul"> :
<li><span>Some text</span><ul>
So far I have this, but not the expected results. Please, what am I doing wrong?
var para1 = document.createElement("li");
var para2 = document.createElement("span");
var node = document.createTextNode("Some text");
para2.appendChild(node);
var para3 = document.createElement("ul");
var element = document.getElementById("my_ul");
element.appendChild(para1);
element.appendChild(para2);
element.appendChild(para3);
If you want shorter code without creating objects for each html elements just do this:
var element = document.getElementById("my_ul");
var html = '<li><span>Some text</span></li>';
element.innerHTML = html + element.innerHTML;
Like this:
var ul = document.getElementById("my_ul");
var li = document.createElement("li");
var span = document.createElement("span");
var text = document.createTextNode("Some text");
span.appendChild(text);
li.appendChild(span);
ul.appendChild(li);
<ul id="my_ul">
</ul>
Is this what you want to do?
Demo: Fiddle
var para1 = document.createElement("li");
var para2 = document.createElement("span");
var node = document.createTextNode("Some text");
para2.appendChild(node);
para1.appendChild(para2);
element = document.getElementById("my_ul");
element.appendChild(para1);
Your code does this:
element.appendChild(para1);
Make the list item a child of the original list
element.appendChild(para2);
Make the span a child of the original list
element.appendChild(para3);
Make the new list a child of the original list
You need to append each element to the element you want to be its parent instead of appending everything to the original list.
Replace element with the appropriate variable.
$(document).ready(function(){
var para1 = document.createElement("li");
var para2 = document.createElement("span");
var node = document.createTextNode("Some text");
para2.appendChild(node);
var element = document.getElementById("my_ul");
element.appendChild(para1);
para1.appendChild(para2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="my_ul">
</ul>
var ul = document.getElementById("my_ul");
var li = document.createElement("li");
var span = document.createElement("span");
var textNode = document.createTextNode("Some text");
span.appendChild(textNode);
li.appendChild(span);
ul.appendChild(li);