Solved

Javascript and HTML5 to do list

Posted on 2014-02-13
7
340 Views
Last Modified: 2014-03-01
I'm trying to get a HTML5 to do list to work. When I add items to the list I should be able to copy past the url to another tab and it should display all the contents on the list but it is not. How do I fix it? This is from a tutorial that I'm following to learn HTML5 and Javascript. Attached is the HTML file. Thank you.
todo-basic.html
0
Comment
Question by:centem
7 Comments
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 500 total points
ID: 39856891
Do you have jquery in the '_scripts' directory like it shows here?

<script src="_scripts/jquery-1.8.2.min.js"></script>

Open in new window

0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39856922
Hey Dave, can you check out this js quandary http:Q_28364025.html
0
 

Author Comment

by:centem
ID: 39856929
Yes I do.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:centem
ID: 39856940
What am I missing?
0
 
LVL 22

Expert Comment

by:Snarf0001
ID: 39857058
You're never actually calling the "loadToDO" function.


$(document).ready(function (e) {
        var theList = document.getElementById('theList');
        $('#saveAll').click(function (e) {
            e.preventDefault();
            localStorage.setItem('todoList', theList.innerHTML);
        });
        $('clearAll').click(function (e) {
            e.preventDefault();
            localStorage.clear();
            location.reload();
        });
        function loadToDo() {
            theList.innerHTML = localStorage.getItem('todoList');
        }

        loadToDo();   //this is missing from your code
    });
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39857610
Snarf's right, but you have some other problems as well. The first time you load your page, or subsequently load after a clear(), your UL will be empty, so you'll never see the Enjoy Life text, and actually have nowhere to type into. You can solve this by adding a simple if statement. If there is no localStorage, drop in a static value.

You also have the ID selector missing from your clearAll() function.

Finally, not really a problem - more of an observation. You're mixing javascript and jquery - not sure why. You also have the javascript:void() calls on your links but they're not needed because you're using e.preventDefault()

Anyway, have a look at this:

$(document).ready(function() {
	var theList = $('#theList');
	loadToDo();

	$('#saveAll').click(function(e){
		e.preventDefault();
		localStorage.setItem('todoList', theList.html());
	});
		
	$('#clearAll').click(function(e){
		e.preventDefault();
		localStorage.clear();
		location.reload();
	});

	function loadToDo(){
		if (toDoList = localStorage.getItem('todoList')) {
			theList.html(toDoList);
		} else {
			theList.html('<li>Enjoy Life :)</li>');
		};
	}
});

Open in new window

0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39897436
How is that the answer if you already had the jQuery library in the right place????
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now