[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 364
  • Last Modified:

Javascript and HTML5 to do list

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
centem
Asked:
centem
1 Solution
 
Dave BaldwinFixer of ProblemsCommented:
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
 
Scott Fell, EE MVEDeveloperCommented:
Hey Dave, can you check out this js quandary http:Q_28364025.html
0
 
centemAuthor Commented:
Yes I do.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
centemAuthor Commented:
What am I missing?
0
 
Snarf0001Commented:
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
 
Chris StanyonCommented:
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
 
Chris StanyonCommented:
How is that the answer if you already had the jQuery library in the right place????
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now