I am completely new to HTML and JavaScript and I am completely lost.
I am trying to create a to do list where input adds to the top of the list, and when an item in the list is clicked, it is removed.
I am trying to avoid using JQuery or anything outside of pure js.
<!DOCTYPE html>
<html>
<script type="text/JavaScript">
var number_of_items = 0;
var list = [];
var list_container = document.createElement("div");
list_container.id = "container";
function makelist(){
list_container.innerHTML = "";
list.unshift(document.getElementById("todo").value);
++number_of_items;
document.getElementsByTagName("body")[0].appendChild(list_container);
var list_element = document.createElement("ul");
list_container.appendChild(list_element);
for( var i=0 ; i < number_of_items ; ++i){
var list_item = document.createElement("li");
list_item.innerHTML = list[i];
//The problem is here
list_item.onClick = function(){
alert("working");
list.splice(i, 1);
--number_of_items;
makelist();
}
list_element.appendChild(list_item);
}
}
</script>
<body>
Todo: <input type="text" id="todo">
<input type="button" value="Submit" onclick="makelist()" />
</body>
</html>
The problem is, the list_item onclick function never activates. Why?
I apologize in advance for any problems with the way I stated my question.
http://jsbin.com/wicopu/1/edit
use onclick instead of onClick...
or even better ... use event listeners
Related
My ToDo List dont wanna work the way i want. I've just been working with JavaScript for 2 weeks sthis is very new to me, therefor the code maybe doesnt look that nice.
The result comes out wrong. If I type in "buy food" the first line gonna show just that, but the next time I wanna add "walk the dog", then it displays
buy food
buy food
walk the dog
I hope you understand my problem. It also ends the unordered list tag after the first click and adds the rest of the things in another.
Here's the JavaScript:
var taskList = [];
var text = "<ul>"
function addToList() {
var task = document.getElementById("toDoTask").value;
taskList.push(task);
for(i = 0; i < taskList.length; i++){
text += "<li>" + taskList[i] + "</li>" ;
}
text += "</ul>";
document.getElementById("todoList").innerHTML = text;
}
The issue is you're closing the ul tag after adding each item. Instead of concatenating raw HTML, consider using element objects and appending, and using a text node object to handle the user input - this removes the possibility of a DOM Based XSS vulnerability.
window.onload = function() {
var taskList = [];
var container = document.getElementById("todoList");
document.getElementById("add").onclick = addToList;
function addToList() {
var task = document.getElementById("toDoTask").value;
taskList.push(task);
var ul = document.createElement('ul');
var li;
for (i = 0; i < taskList.length; i++) {
li = document.createElement('li');
li.appendChild(document.createTextNode(taskList[i]))
ul.appendChild(li);
}
container.innerHTML = '';
container.appendChild(ul);
}
};
Task:
<input id="toDoTask" /> <input type="button" id="add" value="Add" />
<div id="todoList">
</div>
You should not use the innerHtml. This replace all the text of your content. You should just add the li to your ul.
You can do that by using the append function by jquery Append
your <ul> must contain an id like this <ul id="toDoList">
then you make $("#toDoList").append("yourTask");
yourTask must contains the li.
With this, you don't need to iterate on all your element list
Not sure, but you seem to keep adding to text the second time, so text will be something like <ul><li>buy food</li></ul><li>buy food</li><li>walk the dog</li></ul>, which is invalid HTML by the way, but gets outputted anyway...
On each call of function addToList() you should reset the variable text.
For example:
function addToList() {
var task = document.getElementById("toDoTask").value;
taskList.push(task);
text="";
for(i = 0; i < taskList.length; i++){
text += "<li>" + taskList[i] + "</li>" ;
}
text += "</ul>";
document.getElementById("todoList").innerHTML = text;
}
The whole list of items in array will appends to variable text on each call.
I'm trying to build a todo list using javascript and this is what I've got so far:
HTML
<!DOCTYPE html>
<html>
<head>
<title>To Do List</title>
</head>
<body>
<div id='TodoTable-wrapper'>
<ul id='TodoTable'>
</ul>
</div>
<input type="text" placeholder= "What needs to be done?" id="todoText">
<button class="btn" id="addTodo">Add</button>
<script src="script.js"></script>
</body>
</html>
JAVASCRIPT
var inputField = document.getElementById('todoText');
var todoList = new Array();
var uList = document.getElementById('TodoTable');
var addButton = document.getElementById('addTodo');
var listItemCheckbox = document.createElement('input');
listItemCheckbox.type = 'checkbox';
var addTodo = function (todoText) {
addToArray(todoText);
refreshList();
};
var addToArray = function(text) {
todoList.push(inputField.value);
}
var refreshList = function() {
uList.innerHTML = "";
var listItem;
for (var i = 0; i<todoList.length; i++) {
listItem = document.createElement('li');
listItem.innerHTML = todoList[i];
uList.appendChild(listItem);
listItem.appendChild(listItemCheckbox);
}
}
addButton.addEventListener('click', function(e){
var todoText = inputField.value;
addTodo(todoText);
});
The problem I have is that as a new list item is created, only the last item in the list has a checkbox next to it (the previews ones get deleted). I have an inkling that this happens because the function refreshList creates a new list every time the array 'todoList' is updated and the 'listItem.appendChild' only runs once in the for loop.
Is there a way for me to get it run every time a list item is created, as well as find a way to associate it with the corresponding list item? (so I can create a function to delete individual list items later).
Thanks alot in advance for any input!
You are reusing the same checkbox object.
You should create a new checkbox everytime you need to add one, otherwise you are just moving it from one place to another.
can anyone give me the javascipt code to extract following instances of sf_number from my HTML?
<ul class="multi_value_field" style="width: 99.5%;">
<li class="choice" choice_id="sf_number">sf_number<a class="close">×</a><input type="hidden" name="ticket[set_tags][]" value="sf_number" style="display: none;"></li>
<li class="search_field_item"><input type="text" autocomplete="off" tabindex="20"></li>
</ul>
Basically I want to replace all three instances of sf_number with a different
value from another field. This is the code I have made to try and extract sf_number but doesn't work so far:
var n2 = document.getElementsByClassName("multi_value_field").getElementsByClassName("choice");
Thanks in advance
UPDATE
How can I change my existing code by using your suggestions below?
<html>
<script type="text/javascript">
copy = function()
{
var n1 = document.getElementById("ticket_fields_20323656");
var n2 = document.getElementById("choice").getElementsByClassName("sf_number")[0] ;
n2.value = n1.value;
}
</script>
<input type="button" value="copy" onClick="copy();" />
</html>
Update
This doesn't seem to work, is it correct?
<html>
<script type="text/javascript">
copy = function()
{
var fields = document.getElementsByClassName("multi_value_field")[0].getElementsByClassName("choice");
for (var i = 0; i < fields.length; i++)
fields[i].setAttribute("choice_id", "document.getElementById("ticket_fields_20323656").value");
fields[i].getElementsByTagName("input")[0].value = "document.getElementById("ticket_fields_20323656").value";
fields[i].firstChild.nodeValue = "document.getElementById("ticket_fields_20323656").value";
}
</script>
<input type="button" value="copy" onClick="copy();" />
</html>
Try this code. Do you also want to replace the text?
<script>
var fields = document.getElementsByClassName("multi_value_field")[0].getElementsByClassName("choice");
for (var i = 0; i < fields.length; i++)
{
fields[i].setAttribute("choice_id", "something else");
fields[i].getElementsByTagName("input")[0].value = "something else";
fields[i].firstChild.nodeValue = "something else";
}
</script>
var n2 = document.getElementsByClassName("multi_value_field") returns a node List
So you need to use a for loop to iterate the list..
var n2 = document.getElementsByClassName("multi_value_field");
for(var i =0;i< n2.length;i++){
var $li = n2[i].getElementsByClassName("choice"); This is again a Node list.
for(var j = 0;j< $li.length ; j++){
$li[j] // This the li in question
}
}
UPDATE
var n1 = document.getElementById("ticket_fields_20323656");
var n2 = document.getElementById("choice").getElementsByClassName("sf_number");
// The above line again return's node List ....
n2.value = n1.value;
Replace that by this line with this if you feel it has a single class
var n2 = document.getElementById("choice").getElementsByClassName("sf_number")[0] ;
But the thing is I don't see the element with id="choice" in the HTML.
I'm not sure I understand your question.
There is no HTML attribute named "choice_id", and using non–standard attributes is not a good idea. If you want to identify a number of elements using the value 'sf_number', you should use a class instead, e.g.
<li class="choice sf_number">sf_number<a class="close">×</a>...</li>
Now you can get all elements with class of "sf_number" using getElementsByClassName, or querySelectorAll. You can add a shim for one or both of those to make life easier, then use:
var sfNumbers = document.querySelectorAll('.sf_number');
Then you can iterate over the collection per other answers.
An element can have multiple classes, the above will select only those with a class of 'sf_number'. If you want to select the text sf_number, you are much better off putting it in a span or similar element so you can reference it more directly. Relying on different browsers to insert text nodes consistently is not a good idea.
Here is the code I have, I am trying to append the elements in the array to a drop down select box. The code works fine until the appendChild method. I can't figure out why that one line is not working. Here is the code
</head>
<body>
<h1> Eat Page</h1>
<p id="test">Hi</p>
<select id="CusineList"></select>
<script type="text/javascript">
var cuisines = ["Chinese","Indian"];
var sel = document.getElementById('CuisineList');
for(var i = 0; i <cuisines.length; i++){
var optionElement = document.createElement("option");
optionElement.innerHTML = cuisines[i];
optionElement.value = i;//cuisines[i];
//document.getElementById("test").innerHTML = cuisines.length;
sel.appendChild(optionElement);
}
</script>
<p> When </p>
</body>
</html>
You have spell miss.
Your id is CusineList, but when you use CuisineList to select.
Beside that, your code works.
There's a typo on
var sel = document.getElementById('CuisineList');
This should be
var sel = document.getElementById('CusineList');
Or change your html. From
<select id="CusineList"></select>
To
<select id="CuisineList"></select>
When we append node using java script, after setting nodes' attributes/properties first we have to append this node into its related parent and after appending node, we can set its content or related inner HTML / text.
here is the solution for above issue:
var cuisines = ["Chinese", "Indian"];var sel = document.getElementById('CusineList');
var optionElement;
for (var i = 0; i < cuisines.length; i++) {
optionElement = document.createElement("option");
optionElement.value = i;
sel.appendChild(optionElement);
optionElement.innerHTML = cuisines[i];
document.getElementById("test").innerHTML = cuisines.length;
}
I have created a bin with the solution on http://codebins.com/codes/home/4ldqpcn
I trying to generate an input (type="button") and setting the onclick-Event to a function, which should hand over a parameter. The whole object should be appended to a div and thats it. Basically this is my try, but I can't see why it does not work.
I pasted the code to jsfiddle, hence its easier for you to reproduce. Click here.
What am I'm doing wrong? I'm learning it by trial and error, so please explain whats wrong. Thanks a lot!
[edit] for the case jsfiddle will be down one day, here is the code I tried to run... :)
<!doctype html>
<html>
<head>
<title>onclick event example</title>
<script type="text/javascript" language="javascript">
var i = 0;
var h = new Array();
function addButton() {
i++;
var container = document.getElementById("check0");
var h[i] = document.createElement("input");
h[i].type = 'button';
h[i].name = 'number' + i;
h[i].value = "number" + i;
h[i].id = 'number' + i;
h[i].onclick = function() {
showAlert(i)
};
container.appendChild(h[i]);
}
function showAlert(number) {
alert("You clicked Button " + number);
}
</script>
</head>
<body>
<div id="check0">
<input type="button" value="klick mich" id="number0" onclick="addButton()"/>
</div>
</body>
</html>
Here is the fixed fiddle for you.
var h[i] = ... is invalid JavaScript.
What you write in the "JavaScript" frame on jsfiddle is executed onload, so this code is not yet present when the HTML you provide is executed (and neither is the addButton() function).
<script>
var i = 0;
var h = new Array();
function addButton() {
i++;
var container = document.getElementById("check0");
h[i] = document.createElement("input");
h[i].type = 'button';
h[i].name = 'number' + i;
h[i].value = "number" + i;
h[i].id = 'number' + i;
h[i].onclick = function() {
showAlert(i)
};
container.appendChild(h[i]);
}
function showAlert(number) {
alert("You clicked Button " + number);
}
</script>
<div id="check0">
<input type="button" value="klick mich" id="number0" onclick="addButton()"/>
</div>
Try using h.push(...) instead of trying to send to a non created element in the array
var x = document.getElementById('pagination');//pagination is an empty div in html
var y ='';
for(var i = 0; i <= (pageMax); i++){
y = y+"<a id ='pageNumber"+i+"' onclick='changePage("+(i+1)+");'>"+(i+1)+"</a>\n ";
} x.innerHTML=y }
i used this to make a pagination for a table. The function will create a row of numbers until button max. 'changePage("+(i+1)+"); ... will call a function and send the i index(number that the page is) of the pagenumber. also i dynamically create a id unique for each number.