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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy Pleaes help on debug!

    hi all, I saved background images in cookies and reuse it next time the user visit again. but it only work on FF, not any other major browsers. please help me debug!! thank you!!!!

    [CODE]
    <script type="text/javascript">
    function setCookie(){
    var expireDate=new Date(); expireDate.setMonth(expireDate.getMonth()+6);
    var skin_cookie="skin="+getSkin+"; expires="+expireDate.toUTCString();
    document.cookie=skin_cookie;
    checkSkin();
    }

    function checkSkin(){
    if(document.cookie!==""){
    getCookie=document.cookie.split("=")[1];
    findSkin=getCookie.substring(getCookie.indexOf("=")+1, getCookie.indexOf(";"));
    }
    changeSkin();
    }

    function changeSkin(){
    var showskin=document.getElementById('showskin');showskin.innerHTML=findSkin;
    document.body.background=findSkin+'.png';
    document.f.skins.focus();

    }

    function getSkin(){
    getSkin=document.getElementById("skins").value;

    if(getSkin=='water' || getSkin=='fire' || getSkin=='wood' || getSkin=='white'){
    setCookie();
    }
    else{alert('pick one of the four skins from the list');}

    }
    </script>
    [CODE]

  • #2
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    and here is the html part

    [CODE]
    <body onload="checkSkin()" style="text-align:center; font-weight:bold; font-size:20px;">

    <h1 style="font-size:50px;margin-top:10%">User preferences</h1>

    <h2 style="font-size:30px;">Skin:<span id="showskin"></span></h2>
    <form name="f">
    Change Skin: <input type="text" size="10" name="skins" id="skins" />(Skins: water, fire, wood, white)
    <br /><br />
    <input type="submit" value="Save" onclick="getSkin()" style="margin-right:15%" />
    </form>

    [CODE]

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Try using your error console in the browsers where you say it does not work. Press F12 key. What error message do you receive?
    Or put some alerts in at strategic positions to inspect the value of variables. Is the problem that the cookie is not set, or not retrieved?

    document.f.skins.focus(); // looks suspicious to me

    var showskin=document.getElementById('showskin'); // do not use the same name for an HTML element and a Javascript variable. Some browsers dislike this.

    The closing code tag is [/CODE]. You can add the code tags simply by using the octothorpe or # button on the toolbar.


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 04-14-2013 at 12:32 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    AlwaysNew (04-15-2013)

  • #4
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the reply.

    I changed showskin to showSkin for difference.

    I used console as you said. but the some result is confusing me.

    f12 didn't bring out the error message on safari, if you know another way please share.

    on G-Chrome, it says findSkin is not defined. sounds ok to me, and im working on that.

    on IE, i got 5 error messages:

    HTML1527: DOCTYPE expected. The shortest valid doctype is "<!DOCTYPE html>".
    cisw400_a7.html, line 1 character 1
    HTML1502: Unexpected DOCTYPE. Only one DOCTYPE is allowed and it must occur before any elements.
    cisw400_a7.html, line 34 character 1
    HTML1513: Extra "<html>" tag found. Only one "<html>" tag should exist per document.
    cisw400_a7.html, line 35 character 1
    HTML1503: Unexpected start tag.
    cisw400_a7.html, line 36 character 1

    I moved doctype on the line1, removed start html tag. FF still work and chrome remain the same , so im fine with that.

    the last message , says unexpected start tag which is the < head > tag. I don't see why that is an error.

    here is the code after i modified. please help again

    Code:
    <!DOCTYPE HTML>
    <script type="text/javascript">
    		function setCookie(){
    			var expireDate=new Date(); expireDate.setMonth(expireDate.getMonth()+6);
    			var skin_cookie="skin="+getSkin+"; expires="+expireDate.toUTCString();
    			document.cookie=skin_cookie;
    			checkSkin();
    		}
    		
    		function checkSkin(){
    			if(document.cookie!==""){ 
    				getCookie=document.cookie.split("=")[1];
    				findSkin=getCookie.substring(getCookie.indexOf("=")+1, getCookie.indexOf(";"));				
    				}
    			changeSkin();
    		}
    		
    		function changeSkin(){
    			var showSkin=document.getElementById('showskin');showSkin.innerHTML=findSkin;
    			document.body.background=findSkin+'.png';
    			document.f.skins.focus();
    			
    		}		
    
    		function getSkin(){
    			getSkin=document.getElementById("skins").value;
    
    			if(getSkin=='water' || getSkin=='fire' || getSkin=='wood' || getSkin=='white'){
    				 setCookie();
    			}
    			else{alert('pick one of the four skins from the list');}
    			
    		}
    	</script>
    
    <head>
    <meta charset="utf-8">
    <title>cisw400 Assignment 7</title>
    </head>
    
    <body onload="checkSkin()" style="text-align:center; font-weight:bold; font-size:20px;">
    
    	
        
    	<h1 style="font-size:50px;margin-top:10%">User preferences</h1>
        
        <h2 style="font-size:30px;">Skin:<span id="showskin"></span></h2>    
        <form name="f">
        	Change Skin: <input type="text" size="10" name="skins" id="skins" />(Skins: water, fire, wood, white)
            <br /><br />
            <input type="submit"  value="Save" onclick="getSkin()" style="margin-right:15%" />
        </form>
    	<p><a href="index.html">Home</a></p>
    </body>
    </html>

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Why did you remove the html-tag? It is required.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Title required</title>
    </head>
    <body>
    
    
    </body>
    </html>
    This error:

    the last message , says unexpected start tag which is the < head > tag. I don't see why that is an error.
    is probably as a result of removing the opening html-tag.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    .. and forms no longer use the name attribute; use an id instead.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #7
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    i removed because there is an error message says to remove it.

  • #8
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    if I go with document.f.skins.focus(). name of the form is needed, id will not work.
    i can only use id with getElementById('skins').focus()

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,733
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by AlwaysNew View Post
    if I go with document.f.skins.focus(). name of the form is needed, id will not work.
    i can only use id with getElementById('skins').focus()
    You should use the id notation.

    If the cookie does not exist findSkin is undefined. You should set a default value for findSkin.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Tags for this Thread

    Posting Permissions

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