Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Javascript and HTML5 to do list

Posted on 2014-02-13
7
Medium Priority
?
360 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 
LVL 84

Accepted Solution

by:
Dave Baldwin earned 2000 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 54

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
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!

 

Author Comment

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

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 44

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 44

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

618 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