JavaScript - Help Newb Understand Nested Functions And Objects
This is a little hard to explain so I'm posting an example.
Code: //NESTED FUNCTION I'M USING TO DEMONSTRATE MY QUESTION function foo(a) { this.x = 5; //USED TO SET THE VALUE OF X if( a == 0 ) return function(z) { return x = z; } //USED TO RETRIEVE THE VALUE OF X else if( a == 1 ) return function() { return x; } } //MAKES setX THE SETTER FUNCTION var setX = foo(0); //MAKES getX THE GETTER FUNCTION var getX = foo(1); print( "setX(25), not an instance: " + setX( 25 ) ); print( "getX(), not an instance: " + getX() ); print( "" ); //CREATES AN OBJECT INSTANCE USING FOO AS CONSTRUCTOR var q = new foo(); print( "value of x in object instance: " + q.x ); print( "" ); print( "setX(25), not an instance: " + setX( 25 ) ); print( "getX(), not an instance: " + getX() ); This code will output: Code: setX(25), not an instance: 25 getX(), not an instance: 25 value of x in object instance: 5 setX(25), not an instance: 25 getX(), not an instance: 25 Observations: It seems like this.x actually has two meanings. 1)x becomes a member of the "Function" object foo(). 2)x becomes a part of the constructor for prototype class foo. But why then does x revert back to the original value of 5 when I use foo as a constructor? Does javascript automatically save the original value on creation for a reason? What is going on behind the scenes to make this happen? Is this behavior part of an ontological model that makes sense? Similarly, if I change "this.x" to "var x" I can access the value of x but I can't change it. Not that that I should be able to, the syntax "var x" doesn't make x a member of foo anyway. But I'm still having trouble classifying the relationship "var x" has to the function. Anyways this is more of a tangent. My main question is above but if anyone has something to say about this, I'd be interested to hear it. It seems like all these behaviors have rules to them, but there is no conceptual model to think through that guide these behaviors. Or maybe I'm just ignorant. Enlighten me. Similar TutorialsI'm sorry if this is asking too much I just find it much easier to learn interacting directly with experience coders but I'm tryign to understand functions better and wanna make sure I got it right. the function syntax looks like this right Code: function functionname() { function code } the perameters kinda confuses me, inside them can go variables right? but where do you declare those variables? before the function or in the function? is it like this? Code: function functionname(x) { var x="Hello" } if thats right do you write the code you want to execute below the variables? like under var x I wanna make a alert I would write alert("x") I'm trying to reuse some code in a different context to do a different job. The code to be reused contains hundreds of lines similar to a = new b.c.d(e,f) with different value for e and f. I need to create a new user defined object with the structure b.c.d. I've made numerous attempts along the lines of: Code: function d (e, f) { this.e = e; this.f = f; } function c () { this.d = d (e, f); } function b () { this.c = c; } var a = new b.c.d("test", "message"); with various permuations of functional declarations. However I get error message "Object expected" or "b.c.d is null or not an object" at the final line of the example. It works with the test line var a = new d("test", "message") but not when I start to build up the expression. How should I define of b.c.d? Hi, I have written a number of functions designed to return frequency data on 1000 randomly chosen numbers using different math functions for the rounding. I would like to include all of these functions within the wrapper of another function so that only one call is needed to get returns from all of the 'inner' functions. However, while each of the functions works in isolation, the moment I wrap them in another function they stop working. The following code is one of the functions 'frequencyWrapperOne' that has been wrapped in the function 'testWrapper'. A call to testWrapper does nothing. Can anyone see what I'm doing wrong? Code: function testWrapper() { function frequencyWrapperOne() { var numberArrayOne = new Array(0,0,0); for (var i = 0; i < 1000; i = i + 1) { var chosenNumber = Math.floor(Math.random() * 3); if (chosenNumber == 0) { numberArrayOne[0] = numberArrayOne[0] + 1; } if (chosenNumber == 1) { numberArrayOne[1] = numberArrayOne[1] + 1; } if (chosenNumber == 2) { numberArrayOne[2] = numberArrayOne[2] + 1; } } return window.alert(numberArrayOne.join(',')); } } testWrapper(); Thanks. I'm having a spot of trouble in making my functions work and my book seems to be pure rubbish. I'm sure that the error is purely syntax, although it may be something more. Code: <script type="text/javascript" src="flowers.js"></script> <script type="text/javascript"> function pageSetup() { var today = new Date(); // this creates a date object with today's date var banner = displayBanner(today); // *should* call the displayBanner function var days = calcDaysToSale(today); // *should* call the function using today's date document.sale.saleMessage.value = days; // *should* set the value to days. // Obviously none of it works. } </script> This is the code working with the script contained in the html file. I'll post the full page at the bottom. The following code is the JavaScript code. The first function isn't made to provide full functionality at the moment, I'm trying to get the rest of it working. Code: function displayBanner(currentDate) { if (currentDate.getMonth() == 2) imgSrc = "winterLogo"; return ("<img src='" + imgSrc + ".gif'>"); } function calcDaysToSale(currentDate) { var saleDay = new Date(); saleDay.setDate(15); // sets the sale date to the 15th of the current month // Subtracts the days remaining until the sale. // If the number is negative, the sale is over. var Days = saleDay.getDate()-currentDate.getDate(); if (Days < 0) { return "The sale has ended."; } else { return Days; } } I have tried to Google the problem and I have also tried to look it up in my book. I simply don't know the right terms to Google, and as I said the book is rubbish. I don't know why the Code: document.sale.saleMessage.value = days; doesn't work for this. Oh well, I'll learn quickly I suppose. Here is the full HTML code: 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=utf-8" /> <title>Carol's Flowers</title> <link href="flowers.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="flowers.js"></script> <script type="text/javascript"> function pageSetup() { var today = new Date(); // this creates a date object with today's date var banner = displayBanner(today); // *should* call the displayBanner function var days = calcDaysToSale(today); // *should* call the function using today's date document.sale.saleMessage.value = days; // *should* set the value to days. // Obviously none of it works. } </script> </head> <body class="oneColLiqCtrHdr"> <div id="container"> <div id="header"> <p><img name="myBanner" src="banner" id="myBanner" alt="Carol's Flowers" /> <!-- end #header --> </p> <div id="links"><a href="#">Home</a> | <a href="#">General Arrangements</a> | <a href="#">Seasonal Designs</a> | <a href="#">Custom Orders</a> | <a href="#">Location</a></div> </div> <div id="mainContent"> <table id="mainTable"> <tr> <td width="201"><h1><img src="Flowers.JPG" alt="Random Flowers" width="200" height="255" /></h1></td> <td width="687"> <p>Here at Carol's Flowers, we believe that there is a perfect floral arrangment for every occasion! Take a look around and see if there is anything you like. If we don't already have it, then we will create it for you!</p></td> </script> </tr> </table> <!-- end #mainContent --></div> <div id="footer"> <p> <form name="sale" id="sale"> Days Until Mid Month Madness Sale : <input type="text" name="saleMessage" id="saleMessage" /></form></p> <!-- end #footer --></div> <!-- end #container --></div> <!-- I am trying to run the script here --> <script type="text/javascript"> pageSetup(); </script> </body> </html> Hi, I am having trouble with a recursive function I created to list out the indexes and values of various nested objects. Code: var macros={ CTRL: { ALT: { ENTER: "<br />", P: "<p>.</p>", A: "<a href=\"\">.</a>", _1: "<h1>.</h1>", _2: "<h2>.</h2>", _3: "<h3>.</h3>", _4: "<h4>.</h4>", _5: "<h5>.</h5>", _6: "<h6>.</h6>" } } }; I want to print out the whole 'bread crumb trail' to each object, ie CTRL ALT 6: <h6>.</h6>, but at the moment my function prints out CTRL ALT twice for 'ENTER' and then never again. The function: Code: function printObj(obj) { for(i in obj) { var n=i.replace("_", ""); document.write(n); if(typeof obj[i]=="string") { document.write(":"); document.write(" "+obj[i].replace(/</g, "<").replace(/>/g, ">")); } else { document.write(n); } if(typeof obj[i]=="object") printObj(obj[i]); document.write("\n"); } } printObj(macros); The current output: Code: CTRLCTRLALTALTENTER: <br /> P: <p>.</p> A: <a href="">.</a> 1: <h1>.</h1> 2: <h2>.</h2> 3: <h3>.</h3> 4: <h4>.</h4> 5: <h5>.</h5> 6: <h6>.</h6> Any advice would be appreciated. Cheers, Gus I have a javascript assignment I am having difficulties with. I have most of it complete but need some assistant with the last portion and that is to get my display function to work. I am sure that this is something I should know how to do but for the life of me can't seem to figure out and just need a little guidance. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Lab03</title> <h1> Person Information </h1> <script type= "text/javascript" charset= "utf-8"> function Person( ) { this.lastname = ' '; this.firstname= ' '; this.areacode= ' '; this.phone_number= ' '; this.show_person = ' '; } </script> <script type= "text/javascript" charset= "utf-8"> var per1 = new Person function getInput( ) { lastname= prompt("please enter your last name: "); firstname= prompt("please enter your first name: "); areacode= prompt("please enter your area code: "); phone_number= prompt ("Please enter your phone number (ex:888-8888): "); return per1; } per1= getInput( ); </script> </head> <body> <script type ="text/javascript" charset= "utf-8"> function show_person( ){ if( firstname == "" && lastname == "" ) { document.writeln( "Name: Unknown" + "<br/>" ); } else if( firstname == 'null' && lastname == 'null' ) { document.writeln( "Name: Unknown" + "<br/>" ); } else if ( firstname == "" || lastname == "") { document.writeln("Name: " + lastname); document.writeln(firstname + "<br/>"); } else if ( firstname == 'null' || lastname == 'null') { document.writeln("Name: " + lastname); document.writeln(firstname + "<br/>"); } else { document.writeln("Name: " + lastname + ", "); document.writeln(firstname + "<br/>"); } else if ( areacode == "" || phone_number == "" ) { document.writeln ("Phone: "); } else if ( areacode == 'null' || phone_number == 'null' ) { document.writeln ("Phone: "); } else { document.writeln('Phone: (' + areacode + ')'); document.writeln(phone_number); } return this.show; } </script> <noscript> <p>You must enable javascript to view all the features of this page.</p> </noscript> </body> </html> Can someone help me out and tell me what it is I need to do to make it work? I actually had it working when I was able to put all the code in the get function but was told I needed a separate display function so any input is greatly appreciated. I posted this once, but it disappeared, and I have no notifications that I did anything wrong. I read the rules before posting and wasn't breaking any so I am not sure why it disappeared but here goes again. I am trying to learn Javascript (particularly OOP) from a series of screencasts by Douglas Crockford. I have developed a theoretical "game" to build to illustrate it to myself better, and learn by example. I must be misunderstanding how inheritance works, because my code is not producing the results I thought it would. Here is what I have, followed by an explanation of my understanding. Code: $(function() { function object(o) { function Funct() {} Funct.prototype = o; return new Funct(); } soldier = { pointsCost: 0, movement: "1 Infantry Block", validTargets: {}, weapons: { "Main Weapon": { "Weapon Type": "M4 Carbine", "Fire Range": 12 }, "Secondary Weapon": { "Weapon Type": "JCP .45", "Fire Range": 3 } } }; var rifleman = object(soldier); rifleman.pointsCost += 10; rifleman.validTargets.target1 = "Infantry" rifleman.weapons["Secondary Weapon"]["Weapon Type"] = ""; rifleman.weapons["Secondary Weapon"]["Fire Range"] = ""; var heavyGunner = object(soldier); heavyGunner.pointsCost += 20; heavyGunner.validTargets.target1 = "Infantry"; heavyGunner.validTargets.target2 = "Light Armor"; heavyGunner.weapons["Main Weapon"]["Weapon Type"] = "SAW M249"; heavyGunner.weapons["Main Weapon"]["Fire Range"] = 12; heavyGunner.weapons["Secondary Weapon"]["Weapon Type"] = ""; heavyGunner.weapons["Secondary Weapon"]["Fire Range"] = ""; var sniper = object(soldier); sniper.pointsCost += 30; sniper.validTargets.target1 = "Infantry"; sniper.weapons["Main Weapon"]["Weapon Type"] = "Savage .308"; sniper.weapons["Main Weapon"]["Fire Range"] = 20; sniper.weapons["Secondary Weapon"]["Weapon Type"] = "JCP .45"; sniper.weapons["Secondary Weapon"]["Fire Range"] = 3; var demolitions = object(soldier); demolitions.pointsCost += 30; demolitions.validTargets.target1 = "Infantry"; demolitions.validTargets.target2 = "Light Armor"; demolitions.validTargets.target3 = "Artilery"; demolitions.validTargets.target4 = "Structures"; demolitions.weapons["Main Weapon"]["Weapon Type"] = "SMAW MK153"; demolitions.weapons["Main Weapon"]["Fire Range"] = 16; demolitions.weapons["Secondary Weapon"]["Weapon Type"] = "M1014 Combat Shotgun"; demolitions.weapons["Secondary Weapon"]["Fire Range"] = 1; var infantry = { rifleman: rifleman, heavyGunner: heavyGunner, sniper: sniper, demolitions: demolitions }; console.log(infantry); }); I start by creating an object function that accepts an object passed in, and sets it to the prototype of a constructor (that would allow me to create a new object linked to, and inheriting from, the initial passed in object) I initialized a solider object literal, and pass that into the object function while creating 4 new objects (rifleman, heavyGunner, sniper, demolitions) These four should inherit from and customize upon the soldier object. The way I understood inheritance is that the new objects (example. rifleman) would inherit properties from the old object (i.e. soldier) and change or add properties, affecting only the new (rifleman) object but not changing the old(solider) object. this works ok somewhat in my example, until it comes to nested objects. In the above example I have objects as values for some Object's properties. (i.e. validTargets and weapons) When I change or add these, all of the new objects seem to inherit the last declarations, from demolitions, as if demolitions is actually changing that part of the soldier object so that the other's inherit those properties. From my viewpoint, I expected these values to not be changed and that the 4 infantry types had no link to each other, but only to the soldier object. I apparently misunderstood something, or coded something wrong. Some minor notes: -I will be updating most of the "string" values to be objects, so for instance, the validTargets value of "Infantry" would actually be the infantry object, stating that any of the 4 solider types would be a valid target. - I intend to create weapons as their own viable objects in the future, and pass those objects instead of "strings" - I intend to extend this (once this is working) to create an armor object that contains armor type units, similar in structure to the infantry object. - If I can get this all to work, I may make this into a "simple" dice style battle game. but that is way off, I just want to get this nesting of objects to work with inheritance for now. Thanks in advance for any help you can provide. Here is a link to the "live" example. (not much different there except if you have firebug you can see the console.log method showing the objects, and how they are inheriting in properly from my POV.) Link to Live example... Blue Hi, I am a begginer in javascript, please help on below I want to create an object with nested objects array like following: var country{ var states=new array(); } var state { city,pincode } this should be called like var city= country[0].state[0].city; any idea will be appreciated Hi Everyone I am trying to write some code to create an object in JS that contains the x,y coords for a shape i wish to draw. I create the shape, and then in a draw function I draw the shape to the screen from the object I created erlier. Trouble it is does not seem to work :S have anyone got and ideas? Code: var myShape = new newShape(200,200); function init() { canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); return setInterval(draw, 50); } // init function newShape(x,y){ this.un_X=x this.un_Y=y function drawAll() { ctx.beginPath(); ctx.arc(un_X,un_Y,30,0,Math.PI*2,true); ctx.closePath(); ctx.stroke(); } // drawAll } // newShape function draw() { ctx.clearRect(0, 0, WIDTH, HEIGHT); myShape.drawAll(); } // draw init(); Thanks in advance Hello, I'm taking Computer Logic in college. I only am truly familiar with HTML and CSS and minimal web hosting stuff. I REALLY want to learn how to program, however. Anyway, we are doing classes/objects and functions. I am trying to figure out how to do this exercise. She starts with having us make this page that has a form that lets you select one of three radio buttons that will change the background color of the web page, along with that there is two text boxes to put a first name and last name. Then there is a button to click which puts your full name concatenated in another box below. All of this, is done, and I pretty much THINK I understand what is going on. Here is the code that we did to get this to happen: Code: <html> <head> <title>Computer Logic in class</title> <script type="text/javascript"> var nextColor = ""; var BR = "<br />"; function setColor(newColor) { nextColor = newColor; } function changeColor() { document.body.bgColor = nextColor; } function displayName() { var firstName = document.ColorAndText.firstName.value; var lastName = document.ColorAndText.lastName.value; document.ColorAndText.fullName.value = firstName + " " + lastName; } </script> </head> <body bgcolor="red"> <form name="ColorAndText" action = ""> <input type="radio" name="colors" value="Blue" onclick="setColor(this.value)"/> Blue <br /> <input type="radio" name="colors" value="LightYellow" onclick="setColor(this.value)"/> Light Yellow <br /> <input type="radio" name="colors" value="Yellow" onclick="setColor(this.value)"/> Yellow <br /> <input type="button" name="changeButton" value="changeColor" onclick="changeColor()" /> <br /> <input type="text" name="firstName" value="First Name" size="40" /><br /> <input type="text" name="lastName" value="Last Name" size="40" /><br /> <input type="text" name="fullName" readonly="true" size="40" /><br /> <input type="button" name="displayButton" value="Display name" onclick="displayName()" /> <br /> </form> </body> </html> Okay, now, I have and can do that. Seems to make sense. Now, then, the actual program I need to make is from the following exercises: Activity 3-4 The owner of a flower shop wants you to develop a form for use on the shop's web site. The form should have a single text box for the user to enter his or her name. Under the text box should be a group of radio buttons for three different kinds of flowers: Roses, Carnations, and Daisies. Below the radio buttons should be a button labeled Request Info, with a read-only text box under it for thanking the user for requesting information. This program doesn't need any functions or onclick attributes for the graphical elements. Okay, here is the code that does that, very simple HTML. Code: <html> <head> <title>Computer Logic in class</title> <script type="text/javascript"> var nextFlower = ""; var BR = "<br />"; function setFlower(newFlower) { nextFlower = newFlower; } function displayMessage() { var firstName = document.Flowers.nameBox.value; document.Flowers.fullName.value = firstName + "," + nextFlower; } </script> </head> <body bgcolor="white"> <form name="Flowers" action = ""> <input type="text" name="nameBox" value="Namebox" size="60"><br /> <input type="radio" name="flowers" value="Roses" onclick="setFlower(this.value)"/> Roses <br /> <input type="radio" name="flowers" value="Carnations" onclick="setFlower(this.value)"/> Carnations <br /> <input type="radio" name="flowers" value="Daisies" onclick="setFlower(this.value)"/> Daisies <br /> <input type="button" name="displayButton" value="Request Info" onclick="displayMessage(this.value)" /> <br /><br /> <input type="text" name="thankyou" readonly="true" size="100" value="Thanks for using this program" /> </form> </body> </html> Okay, now is where I'm stuck. The following exercise is as follows: The flower shop owner in the previous activity wants to see where you can make the form interactive and asks you to have the form display a message in the bottom text box that includes the user's name, a comma, and the words "thank you for your inquiry about" followed by the flower name the user selected. Write a function named displayMessage() that accesses the user's name from the first text box and displays the message in the read-only text box. You also need to make the Request Info button call the displayMessage() function when it's clicked. Using Javascript, make this form active by including event triggers and functions. My teacher has said that I should be able to do this by just referencing these two previous pages of code that I have already pasted. I feel like I am missing something, that I need to be doing something and it's just not working for me. I'm actually really really stuck on this. I haven't even gotten to the second half of the exercise (where I have to have it display about what flower you select) because I cant get this function to work. What am I missing? Also, the exercise we did before these two had us make a very basic account class and object. We don't have to do that at all in this anywhere, but I do know how to do it, in case I need to make a class or something. ANY AND ALL HELP GREATLY APPRECIATED!!! I just don't know what I'm supposed to do, I can't get it to work. js code is as follows: Code: uniqueNo=(function(){ var no=0; return function(){ return no++; } })() document.writeln(uniqueNo()); // 1st time call document.writeln(uniqueNo()); // 2nd time call document.writeln(uniqueNo()); // 3rd time call the result is 1 2 3 why after the 2nd call, the declaration 'var no=0' is useless -- seems 'no' is updated and stored each time it is called? many thanks Hi, i was wondering if there was a way to call a nested javascript function directly, from outside of the function its nested in? for example, if i have the following functions: Code: <script type="text/javascript"> var test = function(){ var testInner = function(){ alert('testInner'); } } </script> can i then call the 'testInner' function directly from an onclick action something like this: Code: <a href="#" onclick="test.testInner()">TEST JS</a><br /><br /> That code is obviously not working for me, but is there something similar to what ive shown here that will work? Thanks in advanced I wrote a log function that took note of various function calls. Thinking that functions are first class objects, and objects have properties, I made the name of each logged function a property of that function, e.g., brightenInnerPara.name = "brightenInnerPara"; Every browser I tried (Firefox, MSIE, Opera, Chrome, Safari) accepted the assignment, no problem. In Firefox and MSIE, the result was what I wanted: brightenInnerPara.name == "brightenInnerPara" But in the others, the result was: brightenInnerPara.name == null Question 1. Which Javascript is correct here? I favor Firefox and MSIE, not merely because they were willing to give me what I wanted, but also because it makes no sense to accept an assignment statement without throwing an error and then give it a null semantics, like Chrome, Opera, and Safari did. I found a workaround, using assignments like this: brightenInnerPara.prototype.name = "brightenInnerPara"; To my surprise, that worked in every browser. But I don't know why. It seems that such assignments are enough to cause each function to have its own distinct prototype. Question 2. Just how inefficient is my workaround, and why does it work? I am a total newb with javascript. i got this slideshow code from the following URL http://javascriptsource.com/miscella...slideshow.html its not working and i dont know why. there were no instructions and i cant figure out why there is only one image listed. i replace the img source with one of of my own but shouldnt there be multiple images? isnt that the point of a slideshow? anyway heres the code: Code: <SCRIPT LANGUAGE="JavaScript"> <!-- Original: Mike Canonigo (mike@canonigo.com) --> <!-- Web Site: http://www.munkeehead.com --> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- Begin NewImg = new Array ( "images/1.gif", "images/2.gif", "images/3.gif" ); var ImgNum = 0; var ImgLength = NewImg.length - 1; //Time delay between Slides in milliseconds var delay = 3000; var lock = false; var run; function chgImg(direction) { if (document.images) { ImgNum = ImgNum + direction; if (ImgNum > ImgLength) { ImgNum = 0; } if (ImgNum < 0) { ImgNum = ImgLength; } document.slideshow.src = NewImg[ImgNum]; } } function auto() { if (lock == true) { lock = false; window.clearInterval(run); } else if (lock == false) { lock = true; run = setInterval("chgImg(1)", delay); } } // End --> </script> </HEAD> <!-- STEP TWO: Copy this code into the BODY of your HTML document --> <BODY> <img src="images/1.gif" name="slideshow"> <table> <tr> <td align="right"><a href="javascript:chgImg(-1)">Previous</a></td> <td align="center"><a href="javascript:auto()">Auto/Stop</a></td> <td align="left"><a href="javascript:chgImg(1)">Next</a></td> </tr> </table> </center><p> If someone can help me i would really appreciate it. (NO THIS IS NOT HOMEWORK!) I just started with javascript and am working on a little game to wrap my head around it and came across an error I can't seem to fix. Code: if (AsteriodXpos[i] < -50 || AsteriodYpos[i] < -100 || AsteriodYpos[i] > WinHeight + 100) { AsteriodXpos[i] = WinWidth; AsteriodYpos[i] = Math.round(Math.random() * WinHeight); AsteriodXSpeed[i] = Math.random() * 5 + 7; AsteriodYSpeed[i] = Math.random() * 7 - 5; AstriodsAvoided += 1; if (AstriodsAvoided % 15 == 0) { document.write('<div style="position:absolute;top:0px;left:0px">'); document.write('<div style="position:relative">'); document.write('<div id="ast" style="position:absolute;font-size:2px"><img src="asteroid.png" height=50 width=50></div>'); document.write('</div>'); document.write('</div>'); AsteriodYpos[AsteriodYpos.length] = Math.round(Math.random() * WinHeight); AsteriodXpos[AsteriodXpos.length] = Math.round(Math.random() * WinWidth) + WinWidth; AsteriodXSpeed[AsteriodXSpeed.length] = Math.random() * 10 + 5; AsteriodYSpeed[AsteriodYSpeed.length] = Math.random() * 7 - 5; asteriods += 1; } } ast[i].style.pixelLeft = AsteriodXpos[i]; ast[i].style.pixelTop = AsteriodYpos[i]+hscrll; When it seems to not like these last two lines as it says "Error: Unable to get value of the property 'style': object is null or undefined". Essentially it is a game where you are flying through space avoiding astroids. after you avoid so many it increases the number of astroids which is where the problem is happening. In case someone would like to see this in context of what im doing the whole code is Code: <html> <head> </head> <body bgcolor="#000000" onload="fly()" onkeypress="displayunicode(event)" style="overflow: hidden"> > <script language="JavaScript"> <!-- Begin x = 0; var startTime = new Date(); // create object imageObj = new Image(); // set image list images = new Array(); images[0] = "ship1.png" images[1] = "ship2.png" images[2] = "ship3.png" images[3] = "ship4.png"; images[4] = "ship5.png" images[5] = "ship6.png" // start preloading for (i = 0; i <= 5; i++) { imageObj.src = images[i]; } AstriodsAvoided = 1; wasCollision = 0; SmallStars = 20; LargeStars = 50; asteriods = 5; SmallYpos = new Array(); SmallXpos = new Array(); LargeYpos = new Array(); LargeXpos = new Array(); Smallspeed = new Array(); Largespeed = new Array(); AsteriodXpos = new Array(); AsteriodYpos = new Array(); AsteriodXSpeed = new Array(); AsteriodYSpeed = new Array(); document.write('<div style="position:absolute;top:0px;left:0px">'); document.write('<div style="position:relative">'); for (i = 0; i < SmallStars; i++) { document.write('<div id="si" style="position:absolute;top:0;left:0;width:1px;height:1px;background:#fffff0;font-size:1px"></div>'); } document.write('</div>'); document.write('</div>'); document.write('<div style="position:absolute;top:0px;left:0px">'); document.write('<div style="position:relative">'); for (i = 0; i < LargeStars; i++) { document.write('<div id="li" style="position:absolute;top:0;left:0;width:3px;height:2px;background:#ffffff;font-size:2px"></div>'); } document.write('</div>'); document.write('</div>'); document.write('<div style="position:absolute;top:0px;left:0px">'); document.write('<div style="position:relative">'); for (i = 0; i < asteriods; i++) { document.write('<div id="ast" style="position:absolute;top:0;left:0;font-size:2px"><img src="asteroid.png" height=50 width=50></div>'); } document.write('</div>'); document.write('</div>'); imgWidth = 150; imgHeight = 150; document.write('<div style="position:absolute;top:0px;left:0px">'); document.write('<div style="position:relative">'); document.write('<div id="shipLayer" style="position:absolute;top:0;font-size:2px"><img id="ship" src="ship.png" height=150 width=150></div>'); document.write('</div>'); document.write('</div>'); WinHeight = window.document.body.clientHeight; WinWidth = window.document.body.clientWidth; ShipYpos = Math.round(Math.random() * WinHeight); ShipXpos = Math.round(Math.random() * WinWidth) / 2; ShipXSpeed = 0; ShipYSpeed = 0; shipLayer.style.pixelLeft = ShipXpos; shipLayer.style.pixelTop = ShipYpos; for (i = 0; i < SmallStars; i++) { SmallYpos[i] = Math.round(Math.random() * WinHeight); SmallXpos[i] = Math.round(Math.random() * WinWidth); Smallspeed[i] = Math.random() * 5 + 1; } for (i = 0; i < LargeStars; i++) { LargeYpos[i] = Math.round(Math.random() * WinHeight); LargeXpos[i] = Math.round(Math.random() * WinWidth); Largespeed[i] = Math.random() * 10 + 5; } for (i = 0; i < asteriods; i++) { AsteriodYpos[i] = Math.round(Math.random() * WinHeight); AsteriodXpos[i] = Math.round(Math.random() * WinWidth) + WinWidth; AsteriodXSpeed[i] = Math.random() * 10 + 5; AsteriodYSpeed[i] = Math.random() * 7 - 5; } function fly() { document.getElementById("ship").src = images[x]; x += 1; if (x == 6) { x = 0; } var WinHeight = window.document.body.clientHeight; var WinWidth = window.document.body.clientWidth; var hscrll = document.body.scrollTop; var wscrll = document.body.scrollLeft; for (i = 0; i < LargeStars; i++) { LargeXpos[i] -= Largespeed[i]; if (LargeXpos[i] < -10) { LargeXpos[i] = WinWidth; LargeYpos[i] = Math.round(Math.random() * WinHeight); Largespeed[i] = Math.random() * 10 + 5; } li[i].style.pixelLeft = LargeXpos[i]; li[i].style.pixelTop = LargeYpos[i] + hscrll; } for (i = 0; i < SmallStars; i++) { SmallXpos[i] -= Smallspeed[i]; if (SmallXpos[i] < -10) { SmallXpos[i] = WinWidth; SmallYpos[i] = Math.round(Math.random() * WinHeight); Smallspeed[i] = Math.random() * 5 + 1; } si[i].style.pixelLeft = SmallXpos[i]; si[i].style.pixelTop = SmallYpos[i] + hscrll; } for (i = 0; i < asteriods; i++) { AsteriodXpos[i] -= AsteriodXSpeed[i]; AsteriodYpos[i] -= AsteriodYSpeed[i]; //for (j=0; j<30; j++){ // xDistance = AsteriodXpos[i]+25-AsteriodXpos[j]+25; // yDistance = AsteriodYpos[i]-25-AsteriodYpos[j]-25; // distance =xDistance*xDistance+yDistance*yDistance; // if (distance<3000 && i!=j){ // } if (AsteriodXpos[i] < -50 || AsteriodYpos[i] < -100 || AsteriodYpos[i] > WinHeight + 100) { AsteriodXpos[i] = WinWidth; AsteriodYpos[i] = Math.round(Math.random() * WinHeight); AsteriodXSpeed[i] = Math.random() * 5 + 7; AsteriodYSpeed[i] = Math.random() * 7 - 5; AstriodsAvoided += 1; if (AstriodsAvoided % 15 == 0) { document.write('<div style="position:absolute;top:0px;left:0px">'); document.write('<div style="position:relative">'); document.write('<div id="ast" style="position:absolute;font-size:2px"><img src="asteroid.png" height=50 width=50></div>'); document.write('</div>'); document.write('</div>'); AsteriodYpos[AsteriodYpos.length] = Math.round(Math.random() * WinHeight); AsteriodXpos[AsteriodXpos.length] = Math.round(Math.random() * WinWidth) + WinWidth; AsteriodXSpeed[AsteriodXSpeed.length] = Math.random() * 10 + 5; AsteriodYSpeed[AsteriodYSpeed.length] = Math.random() * 7 - 5; asteriods += 1; } } ast[i].style.pixelLeft = AsteriodXpos[i]; ast[i].style.pixelTop = AsteriodYpos[i]+hscrll; } if (ShipXpos - ShipXSpeed < -150) { ShipXpos = WinWidth; } else { if (ShipXpos - ShipXSpeed > WinWidth) { ShipXpos = -150; } } if (ShipYpos - ShipYSpeed < -150) { ShipYpos = WinHeight; } else { if (ShipYpos - ShipYSpeed > WinHeight) { ShipYpos = -150; } } ShipXpos -= ShipXSpeed; ShipYpos -= ShipYSpeed; shipLayer.style.pixelLeft = ShipXpos; shipLayer.style.pixelTop = ShipYpos + hscrll; DidCollide() sleep(10); setTimeout('fly()', 10); } // End --> function displayunicode(e) { var unicode = e.keyCode ? e.keyCode : e.charCode; var keyPressed; keyPressed = (String.fromCharCode(unicode)); moveShip(keyPressed) } function moveShip(keyPressed) { switch (keyPressed) { case "w" || "W": if (ShipYSpeed != 25) { ShipYSpeed += 5; } break; case "a" || "A": if (ShipXSpeed != 25) { ShipXSpeed += 5; } break; ww case "s" || "S": if (ShipYSpeed != -25) { ShipYSpeed += -5; } break; case "d" || "D": if (ShipXSpeed != -25) { ShipXSpeed += -5; } break; } } function DidCollide() { for (i = 0; i < asteriods; i++) { xDistance = AsteriodXpos[i] + 25 - ShipXpos - 75; yDistance = AsteriodYpos[i] + 25 - ShipYpos - 75; distance = xDistance * xDistance + yDistance * yDistance; if (distance < 4225) { wasCollision = 1; document.write('<img src="Explosion.png">'); var endTime = new Date(); var totalTime = new Date(); totalTime.setTime(endTime.getTime() - startTime.getTime()); test = "this is a test"; document.write('You managed to last ' + totalTime.getSeconds() + '.' + totalTime.getMilliseconds() + ' seconds. You avoided a total of ' + AstriodsAvoided + 'astroids'); } } } function sleep(milliseconds) { var start = new Date().getTime(); for (var i = 0; i < 1e7; i++) { if ((new Date().getTime() - start) > milliseconds) { break; } } } </script> <!-- Script Size: 3.79 KB --> </body> </html> Any help someone could provide would be wonderful, and if you can explain to me whats going wrong and why its not working that would be even better! Hello, I am trying to make an example that will change when a user selects options. Like: This is some text. <user checks box to remove "some"> This is text. <user checks box to remove "text"> This is. <user UN-checks box to remove "text"> This is text. The problem is, if I try to add the removed text back, I get the original string, even though it was previously changed. I use to have the string between the <p> tags, but then moved it as a global var in the JS file. Code: /* HTML Code */ <body> <input type="checkbox" id="anoption" /> <p id="exampletext"></p> //Text use to be here </body> /* Javascript code(including jquery) */ var example = "This is some text"; //Global in JS file $('document').ready(function(){ $('#exampletext').text(example); //Place the global var in the html }); $('#anoption').click(function() { //Place a click handler for checkbox var tmp = example; if(tmp.search(/some/)) //Attempting to check if the word is there, i don't think this works right { example = tmp.replace("some", ""); } else // if word is not there - add it back { /* Here is where I could also use some logic help. I tried a few things here. */ } I am not sure if using a string is the best way or not. Could anyone please point me in the right direction? Thank you! Hello all, I am an admin, and I am building a radial button search option on a webpage. It works fine, except I cant seem to get it to open the results in a new window. I tried using the "window.open" but it didnt work. Any assitance would be appreciated! Also, I am not a great java programmer, and what you see below is the extent of my knowledge Thanks in Advance!! ===================CODE=============== <html> <body> <script language="JavaScript">eng = 'http://www.google.com/search?q=';</script> Search: <input type="text" id="searchterms"> <input type="button" value="Search" onload="" onclick="window.location = eng + escape(document.getElementById('searchterms').value); return false;"> <br /> <input type="radio" onclick="eng = this.value;" checked name="sengines" value="http://www.google.com/search?q=" />Google <input type="radio" onclick="eng = this.value;" name="sengines" value="http://support.citrix.com/search/basic/?searchQuery=" />CTX KB <input type="radio" onclick="eng = this.value;" name="sengines" value="http://support.microsoft.com/search/default.aspx?mode=r&query=" />MS KB </body> </html> I have a form validation with an AJAX username check and it works perfectly on FF, but doesn't work in IE 9. I am a complete newb when it comes to Jquery and Javascript, so any help/suggestions would be greatly appreciated. Jquery: Code: $('#username').bind('blur',function() { var formData = $('#register').serialize(); $.post('username.php',formData,processData).error('ouch'); function processData(data) { console.log(data); if (data=='pass') { if (! $('#fail').length) { $('#usernameavail').prepend('<p id=\"fail\">Username Is Available!</p>'); } else { $('#usernameavail').html('<p id=\"fail\">Username Is Available!</p>'); } } else { if (! $('#fail').length) { $('#usernameavail').prepend('<p id=\"fail\"><img src=\"http://images/error.png\"> Username Not Available</p>'); } else { $('#usernameavail').html('<p id=\"fail\"><img src=\"http:///images/error.png\"> Username Not Available</p>'); } } } // end processData }); // end submit Here is the username field I am validating against the database for a duplicate username: Code: <input name='username' type='text' id='username' class='required' maxlength='20'> Thanks in advance. I know this has probably been asked many times, but as a total newb I am struggling to find the answer. This page : www.imovecornwall.org/index.htm has two scripts on it, a peicemaker lightbox animation (which works perfectly fine) and a Fancybox script that launches modal windows onclick. The problem is when you launch the fancybox script the screen displays both the Fancybox script and the Peicemaker script. the code is Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="fancybox_multiple/fancybox/fancybox/jquery.mousewheel-3.0.4.pack.js"></script> <script type="text/javascript" src="fancybox_multiple/fancybox/fancybox/jquery.fancybox-1.3.4.pack.js"></script> <link rel="stylesheet" type="text/css" href="fancybox_multiple/fancybox/fancybox/jquery.fancybox-1.3.4.css" /> <link rel="stylesheet" href="fancybox_multiple/fancybox/style.css" /> <script type="text/javascript"> $(document).ready(function() { $("a.pop").fancybox({ 'overlayColor' : '#000', 'overlayOpacity' : 0.8 }); $("a.pop2").fancybox({ 'overlayShow' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic' }); }); </script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-10061181-2']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); function FP_changePropRestore() {//v1.0 var d=document,x; if(d.$cpe) { for(i=0; i<d.$cpe.length; i++) { x=d.$cpe[i]; if(x.v=="") x.v=""; eval("x."+x.n+"=x.v"); } d.$cpe=null; } } function FP_changeProp() {//v1.0 var args=arguments,d=document,i,j,id=args[0],o=FP_getObjectByID(id),s,ao,v,x; d.$cpe=new Array(); if(o) for(i=2; i<args.length; i+=2) { v=args[i+1]; s="o"; ao=args[i].split("."); for(j=0; j<ao.length; j++) { s+="."+ao[j]; if(null==eval(s)) { s=null; break; } } x=new Object; x.o=o; x.n=new Array(); x.v=new Array(); x.n[x.n.length]=s; eval("x.v[x.v.length]="+s); d.$cpe[d.$cpe.length]=x; if(s) eval(s+"=v"); } } function FP_getObjectByID(id,o) {//v1.0 var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id); else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el; if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c) for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; } f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements; for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } } return null; } function FP_swapImgRestore() {//v1.0 var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) { var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } } doc.$imgSwaps=null; } } function FP_swapImg() {//v1.0 var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length; n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm; elm.$src=elm.src; elm.src=args[n+1]; } } } function FP_preloadImgs() {//v1.0 var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array(); for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; } } </script> </head> <body background="images/bg.gif" onload="FP_preloadImgs(/*url*/'images/redbadge.png')"> <div style="position: absolute; width: 1001px; height: 606px; z-index: 2; left: 92px; top: 190px" id="layer2"> <div style="position: absolute; width: 566px; height: 44px; z-index: 1; left: 414px; top: 676px" id="layer9" align="right"> <font face="Trebuchet MS" size="1">Copyright 2011 . imove cornwall . not for profit estate agents in cornwall . a community lead social enterprise</font><p><font face="Trebuchet MS" size="1"> imove estate agents cornwall, cornwall estate agents, imove cornwall, imove, i move, not for profit estate agents, estate agents in cornwall, houses for sale in cornwall, sell privately, private house sales cornwall, i move cornwall, i move estate agents</font></div> <img border="0" src="images/c-head.png" width="980" height="40"><div style="position: absolute; width: 420px; height: 415px; z-index: 2; left: 0px; top: 40px; border-left: 1px solid #DEDBD2; border-right: 1px solid #DEDBD2" id="layer10" align="left"> <div style="position: absolute; width: 1001px; height: 100px; z-index: 1; left: -2px; top: 495px" id="layer11"> <a title="click here for information about imove estate agents" href="about/index.htm"> <img border="0" src="images/_front-small_2.png" width="327" height="135" alt="imove estate agents cornwall"></a><a href="search.htm"><img border="0" src="images/_front-small2_blank3.png" width="324" height="135"></a><a href="sell.htm"><img border="0" src="images/_front-smallr_blank.png" width="330" height="135"></a></div> <p align="center"> <object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" border="0" width="978" height="495"> <param name="movie" value="piecemaker.swf"> <param name="quality" value="High"> <embed src="piecemaker.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="978" height="495"></object> </div> <address> <a href="sell.htm"> <img border="0" src="resized_png_images/head_new_template.png" width="980" height="416"></a></address> <address> </address> <address> </address> </div> <div style="position: absolute; width: 191px; height: 227px; z-index: 1; left: 93px; top: 11px" id="layer1"> <p align="center"> </p> <address align="left"> <img border="0" src="images/logo_2_72dpi_small.png" width="177" height="176"></address> <address align="center"> </address> <p align="left"> </p> <p align="center"> </div> <div style="position: absolute; width: 116px; height: 121px; z-index: 4; left: 1020px; top: 34px" id="layer36"> <a title="Click here to sell with imove" href="sell.htm"> <img border="0" src="images/bluebadge.png" width="133" height="133" id="img1" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img1',/*url*/'images/redbadge.png')"></a></div> <p align="center"> </p> <div style="position: absolute; width: 171px; height: 58px; z-index: 3; left: 327px; top: 61px" id="layer33"> <a class="pop" href="resized_png_images/modal1.png" rel="group1"> <img alt="" src="resized_png_images/tick2.png" border="0" align="left" /></a><address> <span style="font-style: normal"><font face="Myriad Pro" size="1"> </font></span></address> <address> <span style="font-style: normal"><font face="Myriad Pro">Not for profit</font></span></address> </div> <div style="position: absolute; width: 225px; height: 58px; z-index: 3; left: 522px; top: 61px" id="layer34"> <address> <span style="font-style: normal"> <a class="pop" href="resized_png_images/modal2.png" rel="group1"> <img alt="" src="resized_png_images/tick2.png" border="0" align="left" /></a></span></address> <address> <font size="1"><span style="font-style: normal"> </span></font></address> <address> <span style="font-style: normal"><font face="Myriad Pro">Cost effective</font></span></address> </div> <div style="position: absolute; width: 282px; height: 58px; z-index: 3; left: 721px; top: 61px" id="layer35"> <address> <span style="font-style: normal"> <a class="pop" href="resized_png_images/modal3.png" rel="group1"> <img alt="" src="resized_png_images/tick2.png" border="0" align="left" /></a></span></address> <address> <font size="1"><span style="font-style: normal"> </span></font></address> <address> <span style="font-style: normal"><font face="Myriad Pro">Supporting local good causes</font></span></address> </div> <p align="center"> </p> <p align="center"> </p> <div style="position: absolute; width: 657px; height: 50px; z-index: 3; left: 262px; top: 194px" id="layer13"> <div style="position: absolute; width: 130px; height: 44px; z-index: 1; left: 679px; top: 1px" id="layer14"> <a title="Join us on Facebook" href="http://www.facebook.com/pages/Truro-United-Kingdom/Imove-cornwall/121184304626633"> <img border="0" src="images/FaceBook-icon.png" width="33" height="33"></a> <img border="0" src="images/Twitter-icon.png" width="33" height="33"> <img border="0" src="images/Feed-icon.png" width="33" height="33"></div> <p><font face="Myriad Pro"> <a title="Back to the Homepage" href="index.htm" style="text-decoration: none"> <font color="#000000" id="id1" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'id1',1,'style.fontFamily','Myriad Pro','style.fontSize','12pt','style.textDecoration','underline','style.color','#000000')"> home</font></a> <a title="About imove" style="text-decoration: none" href="about/index.htm"> <font color="#000000" id="id2" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'id2',1,'style.textDecoration','underline','style.color','#000000','style.fontFamily','Myriad Pro','style.fontSize','12pt')"> about</font></a> <a title="Property for sale with imove" href="search.htm" style="text-decoration: none"> <font color="#000000" id="id3" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'id3',1,'style.textDecoration','underline','style.color','#000000','style.fontSize','12pt','style.fontFamily','Myriad Pro')"> property search</font></a> <a title="Sell your property with imove" href="sell.htm" style="text-decoration: none"> <font color="#000000" id="id4" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'id4',1,'style.fontFamily','Myriad Pro','style.fontSize','12pt','style.textDecoration','underline','style.color','#000000')"> sell your property</font></a> <a title="Support for existing customers of imove" href="support.htm" style="text-decoration: none"> <font color="#000000" id="id5" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'id5',1,'style.fontFamily','Myriad Pro','style.fontSize','12pt','style.textDecoration','underline','style.color','#000000')"> support</font></a> <a title="Contact imove cornwall" href="contact.htm" style="text-decoration: none"> <font color="#000000" id="id6" onmouseout="FP_changePropRestore()" onmouseover="FP_changeProp(/*id*/'id6',1,'style.fontFamily','Myriad Pro','style.fontSize','12pt','style.textDecoration','underline','style.color','#000000')"> contact us</font></a></font></div> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> <p align="center"> </p> </body> </html> I know it's probably something really simple but I'm totally lost. Any help would be very much appreciated. Hey guys. I am pretty new to JS and programming. The company that I am working for put me on this project and I have a question. Here is a snippit for a form that we have. We use a dreamweaver extension "HDW form to database" to process the forms and put them in a mysql database. the wpform() is a validation function that has been written. what I want, is the fallowing, if you look at the code below in the option object, there are different categories... rock, funk, hip hop, synth etc. i want it so when one of them is selected, it goes to a different respected page. for example, if the value Rock is selected, and you press submit, it would take you to www.google.com . On the other hand if the value Funk is submitted, it will take you to www.yahoo.com . Code: <form action="/HDWFormToDatabase/FormToDatabase.php" method="post" name="theForm" onSubmit="return wpform()" accept-charset="iso-8859-1"> <select size="1" name="genre"> <option selected="selected" value="genre">Choose a Genre!</option> <option value="Rock">Rock</option> <option value="Funk">Funk</option> <option value="Hip Hop">Hip Hop</option> <option value="80s">Synthesizer</option> <option value="Techno">Techno</option> </select> <input type="hidden" name="hdwok" id="hdwok" value=" URL GOES HERE" /> </form> Normally, when this option object is not present, the user presses submit and after the form gets processed to the database, the browser forwards to the "URL GOES HERE" value. However, I am not sure exactly what to do now since the URL which it is forwarded to will change. can someone give me a hint on how to make this happen? just some general advice for a newb? I would write it but I am pretty lost. I was thinking of including a if statement in the wpform() function that goes something like: Code: if (document.theForm.genre.selectedIndex == 0) { alert("Please select your genre."); document.theForm.genre.focus(); return (false); } if (document.theForm.genre.selectedIndex==1) { window.location = "http://www.google.com/"; return(true); } if (document.theForm.genre.selectedIndex==2) { window.location = "http://www.yahoo.com/"; return(true); } etc etc Would this work? Is there a more efficient way of doing something like this that I should know of due to my lack of JS skills? Thanks in advance so much for help. |