javascript - Appending a to-do list -
i trying make "to list" app. trying append put in input list under "to do" "done" button. here have far:
html:
<!doctype html> <html> <link rel="stylesheet" text="text/css" href="doneit.css"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> </head> <body> <div id="container"> <input type="text" id="task" placeholder="new task"/> <button id="enter">enter</button> <div class="todo"> <ul id="chores"><h2>to do:</h2></ul> </div> <button id="reset">new list</button> </div> <script type="text/javascript" src="doneit.js"></script> </body> </html> and javascript:
$(document).ready( function() { var chores=[]; $("#enter").click(function () { var task = $("#task").val(); var $btn = $('<button />', { id: "check", type: "button", text: "done", value: task, click: function(){ var did = this.value; $("#todo").append('<p>'+ check+'</p>'); chores.push(check); } }); $(".reset").click(function() { location.reload(); });
there few bugs in code , it's not clear output want achieve. had change stuff, can , use base.
html:
<div id="container"> <input type="text" id="task" placeholder="new task"/> <button id="enter">enter</button> <div class="todo"> <ul id="chores">to do:</ul> </div> <button id="reset">new list</button> </div> javascript:
var chores = []; $("#enter").click(function () { var task = $("#task").val(); var btn = $('<button/>', { text: "done", value: task, click: function () { alert('clicked'); } }); $("#chores").append('<li>'); $("#chores").append(task); $("#chores").append(btn); $("#chores").append('</li>'); chores.push(task); }); $("#reset").click(function () { $("#chores").empty(); chores = []; }); some important notes:
- understand difference between $(.class) vs $(#id)
- you should not have more 1 element same id
- follow charlietfl advice; console friend
- use ide or validate markup online
- you don't need reload page clear list
Comments
Post a Comment