Emwat Oon Posted June 13, 2014 Share Posted June 13, 2014 (edited) I have a var thisdoor that's returning null. It's supposed to be the cookie name div123. var allcookies = document.cookie; cookiearray = allcookies.split(';'); // Get all the cookies pairs in an array // Now take key value pair out of this array for(var i=0; i<cookiearray.length; i++){ name = cookiearray[i].split('=')[0]; value = cookiearray[i].split('=')[1]; var thisdoor = document.getElementById(name); //thisdoor.className = 'divDoorOpen'; alert(name + "" + thisdoor); //alert("Key is : " + name + " and Value is : " + value); } Can someone tell me why is variable returning null? I have the div id named div123. Edited June 13, 2014 by Emwat Oon Link to comment Share on other sites More sharing options...
davej Posted June 13, 2014 Share Posted June 13, 2014 Do you use the window.onload event or place your code at the bottom of the body? Link to comment Share on other sites More sharing options...
thescientist Posted June 13, 2014 Share Posted June 13, 2014 it's hard to tell without seeing the context (markup and how this Javascript is being called), since we don't know a) if that ID exists and is spelled correctly b ) if you are executing this after the DOM has been allowed to load c) the values of your cookie Link to comment Share on other sites More sharing options...
Emwat Oon Posted June 14, 2014 Author Share Posted June 14, 2014 Do you use the window.onload event or place your code at the bottom of the body? Huh... I must've forgotten to do that. I'll let you know on Monday if that fixed it. Link to comment Share on other sites More sharing options...
Emwat Oon Posted June 16, 2014 Author Share Posted June 16, 2014 (edited) Hmm.. I might be doing this wrong, but I still have the same results. <body onload="rememberOpenDoors()"><script> function rememberOpenDoors() { var allcookies = document.cookie; cookiearray = allcookies.split(';'); // Get all the cookies pairs in an array // Now take key value pair out of this array for (var i = 0; i < cookiearray.length; i++) { name = cookiearray[i].split('=')[0]; value = cookiearray[i].split('=')[1]; var thisdoor = document.getElementById(name); //thisdoor.className = 'divDoorOpen'; alert(name + "" + thisdoor); //alert("Key is : " + name + " and Value is : " + value); } }</script> it's hard to tell without seeing the context (markup and how this Javascript is being called), since we don't know a) if that ID exists and is spelled correctly b ) if you are executing this after the DOM has been allowed to load c) the values of your cookie a) The divs are dynamically created in ASP.net's gridview, which communicates with the database See above c) The only values I'm using at the moment is true/false. In my case, I only need to use the name of the cookie. Edited June 16, 2014 by Emwat Oon Link to comment Share on other sites More sharing options...
thescientist Posted June 16, 2014 Share Posted June 16, 2014 Hmm.. I might be doing this wrong, but I still have the same results. <body onload="rememberOpenDoors()"><script> function rememberOpenDoors() { var allcookies = document.cookie; cookiearray = allcookies.split(';'); // Get all the cookies pairs in an array // Now take key value pair out of this array for (var i = 0; i < cookiearray.length; i++) { name = cookiearray[i].split('=')[0]; value = cookiearray[i].split('=')[1]; var thisdoor = document.getElementById(name); //thisdoor.className = 'divDoorOpen'; alert(name + "" + thisdoor); //alert("Key is : " + name + " and Value is : " + value); } }</script> a) The divs are dynamically created in ASP.net's gridview, which communicates with the database See above c) The only values I'm using at the moment is true/false. In my case, I only need to use the name of the cookie. a) you can still show us what the markup looks like though after it's generated c) I don't see you logging anything (allcookies, cookiearray, name, value, etc). How do you know everything is what you expect it to be? Link to comment Share on other sites More sharing options...
Emwat Oon Posted June 16, 2014 Author Share Posted June 16, 2014 a) The markup is <tr class="NotinboundTbl"><td style="padding:0;" colspan="8"><div id="div103030041" class="divDoorClosed" style="position: relative; left: 5%; overflow: auto"></div> c) I was thinking the code I was posting let me do just that. It's typically alert(div123 null)... But I also have firebug enabled and I do see the cookies in there. They are div123 and set on true. The true/false thing though doesn't really matter in my case. All I'm trying to do is assign the cookie to div123, find cookie div123, change said div123 css class to divDoorOpen. Link to comment Share on other sites More sharing options...
thescientist Posted June 16, 2014 Share Posted June 16, 2014 c) that's the problem, you are assuming. If you just logged the values of everything, you would know for sure. Link to comment Share on other sites More sharing options...
Emwat Oon Posted June 16, 2014 Author Share Posted June 16, 2014 (edited) Right... Assuming is always a bad mindset when debugging....... console.log("name " + name + " | thisdoor:" + thisdoor + " | thisdoor:" + document.getElementById(name) + " | value: " + value); name div103030054 | thisdoor:null | thisdoor:null | value: name div117006704 | thisdoor:null | thisdoor:null | value: That should trace to this markup. <tr class="NotinboundTbl"><td style="padding:0;" colspan="8"><div id="div117006704" class="divDoorClosed" style="position: relative; left: 5%; overflow: auto"> So I'm certain the id is there... Edited June 16, 2014 by Emwat Oon Link to comment Share on other sites More sharing options...
Emwat Oon Posted June 16, 2014 Author Share Posted June 16, 2014 I've tried a jsfiddle, but I don't think I'm doing it right. http://jsfiddle.net/n3YkU/2/ Link to comment Share on other sites More sharing options...
Hadien Posted June 16, 2014 Share Posted June 16, 2014 in the jsfiddle you wrote window.onload code with the "onload" option in the jsfiddle dropdown. this meant that all that javascript you've written got wrapped inside another fucntion to be called when the page loaded, and after the page load then your code gets assigned to the onload and thus doesn't even run. I always select the "No wrap - in <head>" option as thats the most intuitive for others to follow along (i don't know why that's not the default option) also "createCookie(div117006704, true, 1);" needs to have the name wrapped in quotes to work, as "createCookie('div117006704', true, 1);". theres a number of other things that you can fix but using JShint and Tidy can really clean up the code. Here is my update of the code. Also move away from using cookies and start using Webstorage instead. its alot easier to deal with when you're not having to worry about splicing out cookie arrays, it preserving datatypes, being able to store more and run faster,more secure, etc. etc. Link to comment Share on other sites More sharing options...
Emwat Oon Posted June 17, 2014 Author Share Posted June 17, 2014 So I've tried a bunch of things... If this helps anyone, the new variable specifiedDoor works like I want it to. I've also tried changing the name of the name variable to thatdoor variable, but I haven't seen anything new. window.onload = function rememberOpenDoors() { var allcookies = document.cookie; var cookiearray = allcookies.split(';'); // Get all the cookies pairs in an array // Now take key value pair out of this array for (var i = 0; i < cookiearray.length; i++) { var name = cookiearray[i].split('=')[0].toString(); var value = cookiearray[i].split('=')[1]; var thisdoor = document.getElementById(name); var specifiedDoor = document.getElementById('div104027331'); specifiedDoor.className = 'divDoorOpen'; //thisdoor.className = 'divDoorOpen'; //alert(name + " " + thisdoor); //alert("Key is : " + name + " and Value is : " + value); //console.log(name); //console.log(thisdoor); //console.log("name: " + name + " | thisdoor:" + thisdoor.id + " | thisdoor:" + document.getElementById(name) + " | value: " + value); console.log("specifiedDoor: " + specifiedDoor.id); } I found out about the .id thing when specifiedDoor returned an html document. I tried a lot of things with the .id, but no avail on the whole cookie thing. Link to comment Share on other sites More sharing options...
Emwat Oon Posted June 19, 2014 Author Share Posted June 19, 2014 (edited) I realized what the problem was, but at the same time, I don't know what else to do. I tacked on a trim() and lo and behold, it works... Cookies are also separated by spaces... I only figured it out when my specifiedDoor returned null today. Derp, of course it's going to return null, it doesn't exist anymore. Edited June 19, 2014 by Emwat Oon Link to comment Share on other sites More sharing options...
Hadien Posted June 19, 2014 Share Posted June 19, 2014 as I said, use webstorage. its recommended over Cookies especially in HTML 5. and you don't have to worry about such headaches. Back then, Cookies weren't designed to be used the way everyone uses them today, which is why its such a pain to get everything right. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now