How to enable cookies

I have this assignment to read, write, enable cookies so that the username will be stored in a variable and then written into a cookie. My problem is that it seems like the last part of the code is working. But the first part where the username is suppose to be stored into the variable is not working, and I can see that when I run the code and the first two alert boxes don't show. It is suppose to open with "Hello, I am your pet rock" And after I click iRock for the last time, the image is suppose to change to a happy iRock. But it doesn't happen. I guess because the cookie didn't get read. Any suggestions. Here is the link: /iRockChapter3.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "   /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>iRock - The Virtual Pet Rock</title>
<link href="donut_stylesheet/donut.css" rel="stylesheet" type="text/css" />

<script type ="text/javascript" >
var userName;

function resizeRock(){
document.getElementById("rockImg").style.height = (document.body.clientHeight - 100) * 0.9;

function greetUser(){
userName = readCookie("rock_username");
alert("Hello " + userName + ", I missed you.");
alert("Hello, I am your pet rock");

function touchRock(){
    alert("I like attention," + userName + ". Thank you.");

    userName = prompt("What is your name?", "Enter name here.");
alert("It is good to meet you, " + userName + ".");
writeCookie(irock_username", userName, 1 * 365);

document.getElementById("rockImg").src = "rock_happy.png";
setTimeout("document.getElementById(('rockImg').src = 'images/rock.png';", 5 * 60 * 1000);


<body onload="resizeRock(); greetUser(); onResize="resizeRock();">
<img id="rockImg" src="images/rock.png" alt="iRock" style="cursor:pointer"   onClick="touchRock();" />



Let's break this down.

How to enable cookies

Cookies are enabled by default in pretty much every browser since at least 2000. While you can't rely on someone having cookies enabled - I think it's a safe assumption for a homework assignment. These days, for cookies to not be enabled, a user has to explicitly turn them off.

read, write, enable cookies so that the username will be stored in a variable and then written into a cookie

You have two functions that are undeclared. readCookie and writeCookie are being called, but you haven't declared them anywhere yet. You need something that looks like this:

function readCookie() {
    //Return the value of the cookie

function writeCookie(value) {
    //Write the value to the cookie

You can learn more about what exactly a cookie is here:

As well as how to read and write them.

Additionally, you have a few syntax errors in your HTML and JavaScript. Make sure to review it carefully. Things to look for:

  • Make sure every curly brace ({}) has a matching opening / closing one.
  • Make sure all of the HTML attribute values are enclosed properly in quotes. For example, the onload attribute of your body seems to be missing a quote.

Additional tips:

Don't try and build everything at once. Start off with one simple task, and get that working by itself. For instance, start with just setting / read the cookie and not worry about the rock. Once you get one feature working specifically the way you want it working, add more onto it.


you have one line of code in a setTimeout:

setTimeout("document.getElementById(('rockImg').src = 'images/rock.png';", 5 * 60 * 1000);

its syntactically wrong.

setTimeout("document.getElementById('rockImg').src = 'images/rock.png';", 5 * 60 * 1000);

what would be better:

    var rockImg = document.getElementById('rockImg');
    if(rockImg != null)
        rockImg.src = 'images/rock.png';
}, 5 * 60 * 1000);

function(){ ... } creates an anonymous function.
It stays as code not text (which means any syntax higlighter will work on it.) and its easy to read.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.