www.webdeveloper.com
Results 1 to 2 of 2

Thread: Need help, been away from Javascript for awhile!!

  1. #1
    Join Date
    Oct 2009
    Location
    Manitoba
    Posts
    36

    Arrow Need help, been away from Javascript for awhile!!

    I am having problems getting this to work

    http://jamesplamondon.netne.net/Jame...AM/JSEXAM.html

    When you click on a door, its soposed to change to a pic of either a "dream job, date, car, home" and then a pop upcomes saying what you have, then changes back to a door.afterwards adds it to the total at the bottem!

    But i cant seem to get any of it working
    Last edited by jamesplamondon; 01-23-2010 at 05:53 PM.

  2. #2
    Join Date
    Dec 2009
    Location
    Shropshire UK
    Posts
    153
    Don't quite get the goal of this particular exercise, but a couple of versions.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <
    title>Pick to have one of your dreams come true</title>
    <
    style type="text/css">
    <!--
    #form1 p {
        
    font-family"MS Serif""New York"serif"Hei Regular""Helvetica Bold"Copperplate"Prestige Elite Std Bold";
        
    font-weightbold;
        
    font-size16px;
    }
    -->
    </
    style>

    <
    script type="text/javascript">
    var 
    dream = ["dreamhouse.jpg""dreamcar.jpg""dreamjob.jpg""dreamdate.jpg"]; // image array
    var dreamAlert = ["DREAM HOME""DREAM CAR""DREAM JOB""DREAM DATE"]; // alert array

    function zeroInputs (){
        var 
    inputEls document.form1.getElementsByTagName("input");// return am array like object of the input elements to inputEls
        
    for (var 0len inputEls.lengthleni+=1){
            
    inputEls[i].value 0;
        }
    }
        
    function 
    ask(el){// el refers to the image that fired the ask event. Passed as this ask(this)
        
    var door el;
        var 
    inputEls document.form1.getElementsByTagName("input"); // return am array like object of the input elements to inputEls
        
    var Math.floor(Math.random()*4);
        
    door.src dream[i];
        
    alert ("You have found your "+dreamAlert[i]);
        
    inputEls[i].value parseInt(inputEls[i].value)+1// get the value, convert to a number and add 1
        
    door.src="door.jpg";
    }

    window.onload zeroInputs;
    </script>
    </head>
    <body><center>
    <form id="form1" name="form1" method="post" action="">
    <table width="967" border="0" cellpadding="0" cellspacing="0">
      <!--DWLayoutTable-->
      <tr>
        <td height="433" colspan="3" valign="top">
            <p align="center">Behind each one of these doors is one of your<br />
              Dream homes, Cars, Jobs, or your Dream Date</p>
            <p align="center">Which one will you chose?</p>
            <p align="center">      
            <img src="door.jpg" alt="" width="300" height="300" id="imgdoor1" onclick="ask(this)" />
            <img src="door.jpg" alt="" width="300" height="300" id="imgdoor3" onclick="ask(this)" />
            <img src="door.jpg" alt="" width="300" height="300" id="imgdoor2" onclick="ask(this)" />
        </td>
      </tr>
      <tr>
        <td height="30" colspan="3" valign="top"> <p align="center">You have Had</p></td>
        </tr>
      <tr>
        <td width="416" height="114"></td>
        <td width="169" valign="top">
        <label>      
           <div align="left">
              <input type="text" size="3" maxlength="3" value="0" />
              Dream Homes<br />  
              <input type="text" size="3" maxlength="3" value="0" />
              Dream Cars<br />
              <input type="text" size="3" maxlength="3" value="0" />
              Dream Jobs<br />
              <input type="text" size="3" maxlength="3" value="0" />
              Dream Dates<br /> 
           </div>
        </label>
        </td>
        <td width="382"></td>
      </tr>
      <tr>
        <td height="13"></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    </form>
    </center>
    </body>
    </html> 
    or

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <
    html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <
    title>Pick to have one of your dreams come true</title>
    <
    style type="text/css">
    <!--
    #form1 p {
        
    font-family"MS Serif""New York"serif"Hei Regular""Helvetica Bold"Copperplate"Prestige Elite Std Bold";
        
    font-weightbold;
        
    font-size16px;
    }
    -->
    </
    style>

    <
    script type="text/javascript">
    var 
    Obj = {
        
    dream : ["dreamhouse.jpg""dreamcar.jpg""dreamjob.jpg""dreamdate.jpg"], // image array
        
    dreamAlert : ["HOME""CAR""JOB""DATE"], // alert array
        
    initInput : function() { 
            
    this.inputEls document.form1.getElementsByTagName("input"// returns an array type of input elements to inputEls
            
    for (var 0len this.inputEls.lengthlen i+=1this.inputEls[i].value 0// set input values to 0;
        
    },
        
        
    ask: function(el){// el refers to the image that fired the ask event. Passed as this ask(this)
            
    var Math.floor(Math.random()*4);
            
    el.src this.dream[i];
            
    alert ("You have found your DREAM "+this.dreamAlert[i]);
            
    this.inputEls[i].value parseInt(this.inputEls[i].value)+1// get the value, convert to a number and add 1
            
    el.src="door.jpg";
        }
    };
    window.onload = function(){Obj.initInput.call(Obj)};

    </script>
    </head>
    <body><center>
    <form id="form1" name="form1" method="post" action="">
    <table width="967" border="0" cellpadding="0" cellspacing="0">
      <!--DWLayoutTable-->
      <tr>
        <td height="433" colspan="3" valign="top">
            <p align="center">Behind each one of these doors is one of your<br />
              Dream homes, Cars, Jobs, or your Dream Date</p>
            <p align="center">Which one will you chose?</p>
            <p align="center">      
            <img src="door.jpg" alt="" width="300" height="300" id="imgdoor1" onclick="Obj.ask(this)" /> <!-- (this) is our img element -->
            <img src="door.jpg" alt="" width="300" height="300" id="imgdoor3" onclick="Obj.ask(this)" />
            <img src="door.jpg" alt="" width="300" height="300" id="imgdoor2" onclick="Obj.ask(this)" />
        </td>
      </tr>
      <tr>
        <td height="30" colspan="3" valign="top"> <p align="center">You have Had</p></td>
        </tr>
      <tr>
        <td width="416" height="114"></td>
        <td width="169" valign="top">
        <label>      
           <div align="left">
              <input type="text" size="3" maxlength="3" />
              Dream Homes<br />  
              <input type="text" size="3" maxlength="3" />
              Dream Cars<br />
              <input type="text" size="3" maxlength="3" />
              Dream Jobs<br />
              <input type="text" size="3" maxlength="3" />
              Dream Dates<br /> 
           </div>
        </label>
        </td>
        <td width="382"></td>
      </tr>
      <tr>
        <td height="13"></td>
        <td></td>
        <td></td>
      </tr>
    </table>
    </form>
    </center>
    </body>
    </html> 
    RPG

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