Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Aug 2013
    Posts
    150
    Thanks
    21
    Thanked 0 Times in 0 Posts

    LocalStorage API Question

    Hi, I created a localstorage API and I got it working fine. However I am trying to add a little something to make it more handy (cannot say what).

    Im getting an error saying; cannot set property of onblur of null.

    My Javascript

    Code:
    var docTextStorage;
    	
    	docTextStorage = document.querySelector("#DocText");
    	
    		docTextStorage.onBlur = function() {
    		console.log("Click off List");
    			if (window.localStorage) {
    				localStorage.setItem("todoData", this.innerHTML); //This is everything that is input into the list
    			} else {
    				console.log("No Local Storage");	
    			}
    			
    }
    
    
    	if (localStorage.getItem("todoData"));
    	//If there's been something saved previously, go and get it and put it in the list
    	docTextStorage.innerHTML = localStorage.getItem("todoData");
    	console.log("It worked!");
    This is a textarea Im not sure if this makes a diffrence. I had no problems doing this when I made it Paragraph tags or ULs etc.

    My Textarea:

    Code:
    <textarea name="DocText" contenteditable="true" rows="1" class="style2" id="DocText" style="overflow:hidden; height:400px; width:320px" onkeydown="link to js document" onkeyup="link to js document" onmouseup="link to js document" value="">
    </textarea>

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,930
    Thanks
    56
    Thanked 552 Times in 549 Posts
    That selector looks for an id "doctext" but your text area only has a name

  • #3
    Regular Coder
    Join Date
    Aug 2013
    Posts
    150
    Thanks
    21
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    That selector looks for an id "doctext" but your text area only has a name
    No it has an ID

    Code:
    <textarea name="DocText" contenteditable="true" rows="1" class="style2" id="DocText"

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,930
    Thanks
    56
    Thanked 552 Times in 549 Posts
    oh, yes - you're right sorry I didn't see that.

    The only reason I can think of why you would get that error is if you have your code out of order - if the js is in the head, or in a separate file that is loaded in the head, or in the body but before the html is defined then you will get that error.

    If it's like this, it works fine for me:
    Code:
    <body>
    <textarea name="DocText" contenteditable="true" rows="1" class="style2" id="DocText" style="overflow:hidden; height:400px; width:320px" onkeydown="link to js document" onkeyup="link to js document" onmouseup="link to js document" value="">
    </textarea>
    <script type="text/javascript">
    var docTextStorage;
    	
    	docTextStorage = document.querySelector("#DocText");
    	
    		docTextStorage.onBlur = function() {
    		console.log("Click off List");
    			if (window.localStorage) {
    				localStorage.setItem("todoData", this.innerHTML); //This is everything that is input into the list
    			} else {
    				console.log("No Local Storage");	
    			}
    			
    }
    
    
    	if (localStorage.getItem("todoData"));
    	//If there's been something saved previously, go and get it and put it in the list
    	docTextStorage.innerHTML = localStorage.getItem("todoData");
    	console.log("It worked!");
    </script>
    
    </body>
    although generally speaking textarea contents are get/set using value, not innerHTML (but innerHTML seems to work in most cases)

  • #5
    Regular Coder
    Join Date
    Aug 2013
    Posts
    150
    Thanks
    21
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    oh, yes - you're right sorry I didn't see that.

    The only reason I can think of why you would get that error is if you have your code out of order - if the js is in the head, or in a separate file that is loaded in the head, or in the body but before the html is defined then you will get that error.

    If it's like this, it works fine for me:
    Code:
    <body>
    <textarea name="DocText" contenteditable="true" rows="1" class="style2" id="DocText" style="overflow:hidden; height:400px; width:320px" onkeydown="link to js document" onkeyup="link to js document" onmouseup="link to js document" value="">
    </textarea>
    <script type="text/javascript">
    var docTextStorage;
    	
    	docTextStorage = document.querySelector("#DocText");
    	
    		docTextStorage.onBlur = function() {
    		console.log("Click off List");
    			if (window.localStorage) {
    				localStorage.setItem("todoData", this.innerHTML); //This is everything that is input into the list
    			} else {
    				console.log("No Local Storage");	
    			}
    			
    }
    
    
    	if (localStorage.getItem("todoData"));
    	//If there's been something saved previously, go and get it and put it in the list
    	docTextStorage.innerHTML = localStorage.getItem("todoData");
    	console.log("It worked!");
    </script>
    
    </body>
    although generally speaking textarea contents are get/set using value, not innerHTML (but innerHTML seems to work in most cases)
    Thanks! It seems I have almost got it working! I set the localstorage variable "todoData" to "Hello" and when I load the page it display the value from the localstorage. However if I enter new information in the text area the local storage is not updated.

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Events should be all lowercase.

    Code:
    docTextStorage.onBlur

  • #7
    Regular Coder
    Join Date
    Aug 2013
    Posts
    150
    Thanks
    21
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    Events should be all lowercase.

    Code:
    docTextStorage.onBlur

    I changed to onblur but it still doesnt update the localstorage. Anything else maybe?

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,930
    Thanks
    56
    Thanked 552 Times in 549 Posts
    I would try it without this:
    Code:
    onkeydown="link to js document" onkeyup="link to js document" onmouseup="link to js document"
    and using value instead of innerHTML:
    Code:
    localStorage.setItem("todoData", this.value);
    
    //...
    
    docTextStorage.value = localStorage.getItem("todoData");

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,042
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Do you see the console.log entries when you blur?

  • #10
    Regular Coder
    Join Date
    Aug 2013
    Posts
    150
    Thanks
    21
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    I would try it without this:
    Code:
    onkeydown="link to js document" onkeyup="link to js document" onmouseup="link to js document"
    and using value instead of innerHTML:
    Code:
    localStorage.setItem("todoData", this.value);
    
    //...
    
    docTextStorage.value = localStorage.getItem("todoData");
    I need the
    Code:
    onkeydown="link to js document" onkeyup="link to js document" onmouseup="link to js document"
    because im running it alongside with another program thing. Cant get into it.

    I read for textarea's you might need to setinterval so while you type it updates the local storage every x amount of seconds?

  • #11
    Regular Coder
    Join Date
    Aug 2013
    Posts
    150
    Thanks
    21
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    I would try it without this:
    Code:
    onkeydown="link to js document" onkeyup="link to js document" onmouseup="link to js document"
    and using value instead of innerHTML:
    Code:
    localStorage.setItem("todoData", this.value);
    
    //...
    
    docTextStorage.value = localStorage.getItem("todoData");
    YES YOU ARE RIGHT. Simple as setting the value not the innerhtml. why was i so stubborn and overthinking it!!?!?!?!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •