www.webdeveloper.com
Results 1 to 10 of 10

Thread: My first JavaScript page from HeadFirst

  1. #1
    Join Date
    May 2013
    Posts
    4

    My first JavaScript page from HeadFirst

    I just copied the wrote the whole program as per the book headfirst javascript.
    Even downloaded the images as instructed from there website.
    the program is exactly the same as in book(at least that's what i think)

    It is suppose to show unhappy face and they should ak for user's name and then dispaly the message and then the happy face

    Still when i run it, everything works, but i dont see the rock_happy.png image in the end,.. can anyone help??

    I know i am making a silly mistake, just not able to pin point it

    I am pasting the program below........

    <html>
    <head>
    <title>
    iRock - The Virtual Pet Rock
    </title>
    <script type="text/javascript">
    function touchRock()
    {
    var username = prompt("May i have your name please", "Enter your name here");
    if (userName){
    alert("it is good to meet you, " + userName + ".");
    document.getElementById("rock_happyImg").src = "C:\Users\JAIPAL\Desktop\rock_happy.png;";
    }
    }
    </script>
    </head>
    <body onload = "alert('Hi, i am your pet Rock!! ');">
    <div style="margin-top:100px; text-align:center">
    <img id="rock_happyImg" src="C:\Users\JAIPAL\Desktop\rock.png" alt="iRock" onclick="touchRock();"/>
    </div>

    </body>
    </html>

  2. #2
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,457
    Hi there jaipalsingh,

    and a warm welcome to these forums.

    You have made two syntax errors...

    1. this...
    Code:
    
    var username = prompt("May i have your name please", "Enter your name here");
    ...should be ...
    Code:
    
    var userName = prompt("May i have your name please", "Enter your name here");
    2. this...
    Code:
    
    document.getElementById("rock_happyImg").src="C:\Users\JAIPAL\Desktop\rock_happy.png;";
    ...requires the highlighted semi-colon after png to be removed.

    coothead

  3. #3
    Join Date
    May 2013
    Posts
    4
    Thanks for quick reply coothead..
    I made the changed you mentioned still its not working..

    I am using notepad++ to write this program and even without making the changes you suggested, i was still able to run 90% of the program.
    The only part i stuck on is "C:\Users\jaipal_singh\Desktop\rock_happy.png"

    This happy image of the rock is not getting reflected1.JPG2.JPG3.JPG4.JPG

    i have attached snapshot of every step,..appreciate your time and help

    please advice,..

  4. #4
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,457
    Hi there jaipalsingh,

    you are not having a javascript problem now, but rather an image problem.

    Place this code...


    file:///C:/Users/JAIPAL/Desktop/rock_happy.png


    ...in the address bar of your browser, to test that the image is there and working.

    coothead

  5. #5
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    put the image and the html-file both in one folder and change the path to the image to

    Code:
    document.getElementById("rock_happyImg").src="rock_happy.png";
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  6. #6
    Join Date
    May 2013
    Posts
    4
    hi padonak,.. thanks for replying..

    i did as mentioned,... created a folder new folder 2 on desktop and put the 2 images and the html file on it,..

    now,... even the name alert is not coming up{alert("it is good to meet you, " + userName + "."); } and the orginal problem is still there


    the new program now is:

    <html>
    <head>
    <title>
    iRock - The Virtual Pet Rock
    </title>
    <script type="text/javascript">
    function touchRock()
    {
    var username = prompt("May i have your name please", "Enter your name here");
    if (userName){
    alert("it is good to meet you, " + userName + ".");
    document.getElementById("rock_happyImg").src = "rock_happy.png;";
    }
    }
    </script>
    </head>
    <body onload = "alert('Hi, i am your pet Rock!! ');">
    <div style="margin-top:100px; text-align:center">
    <img id="rock_happyImg" src="rock.png" alt="iRock" onclick="touchRock();"/>
    </div>

    </body>
    </html>

  7. #7
    Join Date
    May 2013
    Posts
    4
    Hello coothead,

    test is ok,... i can see the image when i put this in the brow

    Thanks,..

  8. #8
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,457
    Hi there jaipalsingh,

    test is OK,... I can see the image when I put this in the browser
    In that case you have not corrected the code, as I suggested.

    This is what you should be using...
    Code:
    
    <script type="text/javascript">
    function touchRock() {
    var userName=prompt("May i have your name please", "Enter your name here");
    if (userName){
    alert("it is good to meet you, " + userName + ".");
    document.getElementById("rock_happyImg").src="C:\Users\JAIPAL\Desktop\rock_happy.png";
      }
     }
    </script>
    Of course, if you use browsers other than IE, then you should use this form for coding...



    file:///C:/Users/JAIPAL/Desktop/rock_happy.png

    ...and...

    file:///C:/Users/JAIPAL/Desktop/rock.png




    coothead
    Last edited by coothead; 05-18-2013 at 04:23 PM.

  9. #9
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    what error you are getting?
    Last edited by Padonak; 05-18-2013 at 11:50 PM.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  10. #10
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    ok here is working code

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>iRock - The Virtual Pet Rock</title>
    <style type="text/css">
    body{color:#fff;background-color:#000;font-family:'Bookman Old Style',Georgia,Verdana;font-size:14px;text-align:center;font-weight:bold;}
    #content{margin-top:100px; text-align:center}
    #rock_happyImg{border:2px solid #ccc;border-radius:20px;cursor:pointer;}
    .or{color:Darkorange;}
    </style>
    <script type="text/javascript">
    var userName='';
    function touchRock(){
    userName=prompt('May i have your name please? Enter your name here');
    if(userName!=null && userName!=''){
    alert("it is good to meet you, " + userName + "."); 
    document.getElementById("rock_happyImg").src = "rock_happy.jpg";
    document.getElementById("hello").innerHTML = 'Hello, <b class="or">'+userName+'</b>! It\'s nice to meet you!<br /><br /><input type="button" value="Check userName" onclick="chkUn()" /><br /><br />';
    /*
    this prevents showing the dialog again untill the page is reloaded;
    the entered userName stays available for use in other functions
    */
    document.getElementById("rock_happyImg").onclick=function(){/*you can define here some new action for onclick or --->*/return false;}
    }
    }
    
    function chkUn(){
    alert('typeof userName = '+(typeof userName)+'; userName = '+userName);
    }
    
    window.onload=function(){alert('Hi, i am your pet Rock!!');}
    </script>
    </head>
    <body>
    <div id="content">
    <div id="hello"></div>
    <img id="rock_happyImg" src="rock.jpg" alt="iRock" onclick="touchRock()" />
    </div>
    </body>
    </html>
    and live demo
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles