SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text book function not working

    Hi all, I am new here and am just starting studying Javascript from the Headfirstlabs book. Please see my coding below as per the instructions on page 26, the only thing that happens is the onload alert [Hello, I am your pet rock] when the page loads, nothing else and no touchrock function or smiling face, I have the images where they should be and have attached them here. Can anyone tell me why it's not working on my end please?



    Code:
    <html>
      <head>
          <title>irock -The virtual Pet Rock</title>
    
         <script type="text/javascript">
             function touchrock ()  {
               var username = prompt ("What is your name?", "Enter your name here.");
    
               if (username) {
                 alert ("It is good to meet you, " + username + ".");
                 document.getElementByID ("rockImg").src = "rock_happy.png";
              }
    
            }
    
        </script>
    
      </head>
    
      <body onload="alert ('Hello, I am your pet rock.');">
         <div style="margin-top: 100px; text-align: center;">
           <img id="rockIMG" src="rock.png" alt="irock" />
         </div>
    
    </body>
    </html>
    Attached Images Attached Images

  2. #2
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your touchrock function is not being triggered by anything at all (not onload of something, or on a mouse/keyboard action). That function must be triggered somehow, such as if you click on the rock.

    Second, you really shouldn't put event listeners (onload) inside a tag. If all your code has to be within the html page, then I would place a "script" tag just before the closing BODY tag, that would look something like this:
    <script>
    alert('Hello, I am your pet rock.');

    function touchrock() {
    var username = prompt("What is your name?", "Enter your name here.");

    if(username) {
    alert ("It is good to meet you, " + username + ".");
    document.getElementByID ("rockImg").src = "rock_happy.png";
    }
    }

    if(typeof document.body.addEventListener != 'undefined') {
    document.getElementById('rockIMG').addEventListener('click', function() {
    touchrock();
    });
    }
    else {
    document.getElementById('rockIMG').attachEvent('onclick', function() {
    touchrock();
    });
    }
    </script>

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by mikehende View Post
    Can anyone tell me why it's not working on my end please?
    Look again at the code on page 26 - you will see that there are some parts to the image code that you have not yet filled in.

    You can also download all of the code in the book from the Head First JavaScript so that you can compare your own code with working examples.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, it was my fault in copying over the code from the book, I made a few mistakes especially with case sensitive issues. I am truly very sorry guys, it works now but for future references I will search for the code from Headfirst as suggested then post that here, thanks!

  5. #5
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    document.getElementById('rockImg').src='rock_happy.png';
    Code:
    <img id="rockImg" src="rock.png" alt="irock" style="cursor:pointer"
    The above 2 pieces of code, why are there two different codes to point to the images? Depending on the answer please explain if the top piece of code is the general code used that purpose?

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by mikehende View Post
    Code:
    document.getElementById('rockImg').src='rock_happy.png';
    Code:
    <img id="rockImg" src="rock.png" alt="irock" style="cursor:pointer"
    The above 2 pieces of code, why are there two different codes to point to the images? Depending on the answer please explain if the top piece of code is the general code used that purpose?
    The HTML image is how the image is shown on the page.

    The script code changes that image to be a different image.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Zealot
    Join Date
    Feb 2011
    Posts
    108
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, is that the general script code I would use when changing images in the future?

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by mikehende View Post
    Thanks, is that the general script code I would use when changing images in the future?
    Some ways you may use might not be as direct, but the general principle is the same.

    Gain a reference to the HTML element, then adjust some properties of that element.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

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