JavaScript - Setting The Value Of A Drop Down Box
Hello,
I need your help. I have the following drop-down box as an example: [== FRUITS ==] apples oranges pairs kiwi lemon How can I use the code below to set the value of the drop down without knowing its value number (3)? document.getElementById('BOX1').value = 'pairs' Much thanks and appreciation for everyones help. Cheers, J Similar Tutorialsthis is going to be an options page for my site, but will be using cookies. I want to be able to choose from a drop down menu, and there will be about 3 or 4 drop down menus on the page, with about 8 or so options in each one. It would be great if i were to choose an option in the first drop down menu, it wouldn't appear in the second one. And how can I receive it from another page, I wouldn't want the menus, just the out come of what their choice would be. Thank you for reading, would appreciate any help I am very new to Javascript and I have been able to get the menu to close and open, but I can't figure out how to start it up automatically closed at first. I've tried setting ids and values, but nothing seems to work! Please help me out! Code: <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <title>Lab 5_3</title> <script type="text/javascript"> function collapseItem(whichitem) { if (document.getElementById(whichitem).style.display == "none") { document.getElementById(whichitem).style.display = "block"; } else { document.getElementById(whichitem).style.display = "none"; } } </script> </head> <body> <p><a href="#" onClick="collapseItem('category1')">Menu 1</a></p> <div id="category1"> <ul> <li>Option 1</li> <li>Option 2</li> </ul> </div> </body> </html> I have been searching for a long time but have been unsuccessful on how to develop a drop down menu but have the menu items show in a list above the main nav. Not below. I really like the way this functions: http://www.sohtanaka.com/web-design/examples/toggle/ But I would like the item in the list to appear above the main nav so it animates up not down. Can anyone help me on how to alter this js code to perform this task? Here is the jQuery file link: http://code.jquery.com/jquery-latest.js I tried going through this js file but it very complex. Can anyone tell me what I need to change to have the animation roll up instead of down? Any help would be most appreciated. Hello everyone! So, what it does: You can successfully drag something anywhere, but when you click it again, it resets to its original position (I don't know why), and when you try to drag it again, as soon as your cursor touches the object it disappears (I don't know why). I'm hoping someone can tell me why it is happening and how to fix it! Code: // JavaScript Document var posX; var posY; var element; function drag(event) { element = document.getElementById("square"); posX = event.clientX; posY = event.clientY; element.addEventListener("mousemove", move, false); } function move(event) { if (typeof(document.getElementById("square").mouseup) == "undefined") element.addEventListener("mouseup", drop, false); //Prevents redundantly adding the same event handler repeatedly element.style.left = event.clientX - posX + "px"; element.style.top = event.clientY - posY + "px"; } function drop() { element.removeEventListener("mousemove", move, false); element.removeEventListener("mouseup", drop, false); } the html is a simple (position is set to relative): <p id="square" onmousedown="drag(event)">meep</p> Lastly, and most importantly, thank you all for your time =] EDIT: This is the first time I've written javascript code and would like to learn the basics, which is why I am not using a library. I cannot get the cookie to save, I'm pretty new at web designing in general. If you could, the name of the cookie be cirulcook, also any advice you would have for me would be great! Code: <script><!-- function SETcookie(){ document.cookie="Selected="+document.getElementById('myList').selectedIndex; } function GETcookie(){ if (document.cookie){ eval(document.cookie); document.getElementById('myList').selectedIndex=Selected; }}// --></script> </head> <body onLoad="GETcookie()"> <select id="myList" onChange="SETcookie()"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> </select> Hi and hope someone can help, I'm reading a book on Javascript and I've been doing their tutorial on getting and setting cookies. Trouble is my code, and their supplied sample, don't work. It is supposed to display a very simple page with an image. When you click the image it is supposed to open up a new (very simple) page. Your help resolving this is greatly appreciated. My thanks, R Code follows... Code: <html> <head> <title>main page</title> <script language=JavaScript> var lastUpdated = new Date("Tue, 28 Dec 2010"); function getCookieValue(cookieName) { var cookieValue = document.cookie; var cookieStartsAt = cookieValue.indexOf(" " + cookieName + "="); if (cookieStartsAt == -1) { cookieStartsAt = cookieValue.indexOf(cookieName + "="); } if (cookieStartsAt == -1) { cookieValue = null; } else { cookieStartsAt = cookieValue.indexOf("=", cookieStartsAt) + 1; var cookieEndsAt = cookieValue.indexOf(";", cookieStartsAt); if (cookieEndsAt == -1) { cookieEndsAt = cookieValue.length; } cookieValue = unescape(cookieValue.substring(cookieStartsAt,cookieEndsAt)); } return cookieValue; } function setCookie(cookieName, cookieValue, cookiePath, cookieExpires) { cookieValue = escape(cookieValue); if (cookieExpires == "") { var nowDate = new Date(); nowDate.setMonth(nowDate.getMonth() + 6); cookieExpires = nowDate.toGMTString(); } if (cookiePath != "") { cookiePath = ";Path=" + cookiePath; } document.cookie = cookieName + "=" + cookieValue + ";expires=" + cookieExpires + cookiePath; } </script> </head> <body> <h2 align=center> Welcome to my website </h2> <br><br> <center> <script> var lastVisit = getCookieValue("Last Visit"); if (lastVisit != null) { lastVisit = new Date(lastVisit); if (lastVisit < lastUpdated) { document.write("<a href=\"WhatsNew.htm\">"); document.write("<img src=\"new.jpg\" border=0></a>"); } } var nowDate = new Date(); setCookie("LastVisit", nowDate.toGMTString(),"","") </script> </center> </body> </html> Hi and hope someone can help. I'm setting up a fictitious shopping page which uses cookies to remember what a user has selected. The products are photographs that the user can select either framed or unframed versions and I'm trying to put a confirmation box if the user actually requests framed and unframed versions of the same photograph. The code I'm using actually worked before I tried to add this extra functionality but I can't work out how to test for this extra bit. Here's my code and it sets cookies with names as either lulworth01 for the unframed version or lulworth01f for the framed version. The bits that work are in black and my extra code for this test is in red. Any help would be appreciated. Thanks Rog Code: function getCookie(name) { var index = cart.indexOf(name + "="); if(index == -1) return null; index = cart.indexOf("=", index) +1; var endstr = cart.indexOf(";",index); if (endstr == -1) endstr = cart.length; return unescape(cart.substring(index, endstr)); } function setCookie(name) { if ((name.charAt(name.length-1)='f') && (getCookie(name.substring(0,10))!=null)) { confirm("You seem to have placed orders for both a mounted and framed image of the same photograph.\n\nIs that OK?"); } else { alert("Thank you.\n\nYour basket has been updated."); x=parseInt(getCookie(name)) || 0; y=x+1; var today = new Date(); var expiry = new Date(today.getTime()+28*24*60*60*1000); // plus 28 days document.cookie=name+"="+y+";expires="+expiry.toGMTString(); cart = document.cookie; } } Hi Guys , This is the urgnt requirement , I want to change the Browsers setting languge through java script ,and according to it , The data wht I enter dhould be change .Thanks In advance Hi All, I would like to enable / disable my field validation based upon the status of a given checkbox in my form but I am unsure about how to "unset" the varibles that control the validation. If the user clicks the checkbox, this displays the fields ant enables my validation just fine. But if the user then unckeck the box, the field is hidden but the validation remains enabled and the form cannot be submitted. Here is my code: Code: if (document.getElementById("OnAirVariance").checked) { var sprytextfield3 = new Spry.Widget.ValidationTextField("spryStartTime", "time", {validateOn:["blur"], format:"HH:mm:ss", useCharacterMasking:true}); var sprytextfield4 = new Spry.Widget.ValidationTextField("spryEndTime", "time", {format:"HH:mm:ss", useCharacterMasking:true, validateOn:["blur"]}); var sprytextfield5 = new Spry.Widget.ValidationTextField("spryMaterialID", "none", {validateOn:["blur"]}); var sprytextfield6 = new Spry.Widget.ValidationTextField("spryTitle", "none", {validateOn:["blur"]}); }else{ I NEED TO BE ABLE TO REVERSE THE SET VARIABLES SO THE VALIDATION WILL NOT STAY IN EFFCT } Thanks in advance for any help. Kind regards, Ken Hi, I'm banging my head off a brick wall with setting up a 3 dimensional array and trying to loop through it. I'm using the EJS framework (http://embeddedjs.com/). We currently have a 2D array set up to list out features. See below: topfeatures: [ "Feature 1", "Feature 2", "Feature 3", "Feature 4", "Feature 5", "Feature 6" ] <ul> [% for(var i = 0; i < this.topfeatures.length; i++) { %] <li>[%= this.topfeatures[i] %]</li> [% } %] </ul> However, the request we have requires headlines for each set of features. Headline 1 Feature1 Feature2 Feature3 Headline 2 Feature4 Feature5 Feature6 Any ideas how I can do this? Hello, I'm using pull downs for date but it always starts up "Dec" "31" "Year". How can I set it to start as "Month" "Date" "Year"? Thanks. PHP Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Main</title> </head> <body> <br> <form name="form1" id="startOfForm"> <table><tbody> <tr> <td class="question"><label for="birthdate">Select Birthdate</label></td> <td> <select name="selMonth" id="selMonth" > <option value=0 selected>Month</option> <option selected value="1">Jan</option> <option selected value="2">Feb</option> <option selected value="3">Mar</option> <option selected value="4">Apr</option> <option selected value="5">May</option> <option selected value="6">Jun</option> <option selected value="7">Jul</option> <option selected value="8">Aug</option> <option selected value="9">Sept</option> <option selected value="10">Oct</option> <option selected value="11">Nov</option> <option selected value="12">Dec</option> </select> <select name="selDate" id="selDate" > <option value=0 selected>Date</option> <option selected value="1">1</option> <option selected value="2">2</option> <option selected value="3">3</option> <option selected value="4">4</option> <option selected value="5">5</option> <option selected value="6">6</option> <option selected value="7">7</option> <option selected value="8">8</option> <option selected value="9">9</option> <option selected value="10">10</option> <option selected value="11">11</option> <option selected value="12">12</option> <option selected value="13">13</option> <option selected value="14">14</option> <option selected value="15">15</option> <option selected value="16">16</option> <option selected value="17">17</option> <option selected value="18">18</option> <option selected value="19">19</option> <option selected value="20">20</option> <option selected value="21">21</option> <option selected value="22">22</option> <option selected value="23">23</option> <option selected value="24">24</option> <option selected value="25">25</option> <option selected value="26">26</option> <option selected value="27">27</option> <option selected value="28">28</option> <option selected value="29">29</option> <option selected value="30">30</option> <option selected value="31">31</option> </select> <select name="selYear" id="selYear" > <option value=0 selected>Year</option> <option value="2001">2001</option> <option value="2000">2000</option> <option value="1999">1999</option> <option value="1998">1998</option> <option value="1997">1997</option> <option value="1996">1996</option> <option value="1995">1995</option> <option value="1994">1994</option> <option value="1993">1993</option> <option value="1992">1992</option> <option value="1991">1991</option> <option value="1990">1990</option> <option value="1989">1989</option> </select> </td> </tr> <tr> <td colspan=2><input type="submit" value="Submit form"></td> </tr> </tbody></table> </form> </body> </html> Javascript I have 3 combolist fields ( A, B and C ) each of which has just "No" and "Confirmed" as their only options. I have one final combolist ( D ) which has just "Yes" and "No" as options. "No" is the default selected item and Index0 in the list. The user must select "Confirm" all three ( A, B and C ) lists before they should be allowed to select "Yes" in the final list ( D ). I want to be able to have the system to automatically select and display "No" in list ( D ) if any of the first 3 selections ( A, B or C ) are "No". I don't have a problem validating if any of the 3 lists ( A, B or C ) are "No" but I cannot get the final combolist to change from "Yes" ( if previously selected ) to "No". I have tried setting the selected index of (D) to 0 and tried setting the selected value of (D) to "No" but if (D) currently displays "Yes" when any of the ( A, B or C ) are changed to "No" nothing happens to (D). Am I trying to do something that cannot be done ? Any help will be gratefully received. Tony I am sorry the following code is a bit of a mouthful, but I can't find a better way to display the problem. The code works as expected in Chrome, but not in IE and FF. In IE the error is "Object doesn't support this action" and in FF "setting a property that has only a getter". In Chrome there is no error in the console. There are three javascript <script>...</script>s that exist to display a <td> row in a table with a particular graphic depending on the screen width. The odd thing is that in both IE and FF (and of course Chrome), the first two scripts display perfectly well. Why does the third <script> produce an error? It has exactly the same form as the two before it. I can only guess it has something to do with where it occurs Googling the FF error, it has something to do with trying to set a read-only property, but then why do the first two <scripts> work? They are no different (at least I can't see a difference.) Code: <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse" id="table3768"> <script> if (screen.width > 1280) { document.write("<td valign=\"top\" background=\"..\/..\/img\/lesson2.gif\" width=\"840\" height=\"301\">"); } else { document.write("<td valign=\"top\" background=\"..\/..\/img\/lesson.gif\" width=\"369\" height=\"301\">"); } </script> <p> </p> <div align="left"> </table> <table border="0" style="border-collapse: collapse" cellpadding="15"> <tr> <td width="40"> </td> <script> if (screen.width > 1280) { document.write("<td width=\"300\">"); } else { document.write("<td width=\"165\">"); } </script> <font face="Trebuchet MS" color="#808000">Today's lesson is about setting goals...</font></td> </tr> </table> </div> </td> <td rowspan="3"> <table border="0" cellspacing="0" style="border-collapse: collapse" cellpadding="0" id="table3920"> <tr> <td><img border="0" src="../../img/teltopw.jpg" width="550" height="9"></td> </tr> <tr> <td background="../../img/telbarw.jpg"> <p align="center"> <iframe name="ITV" src="lesson1TV.html" marginwidth="0" marginheight="0" scrolling="no" border="0" frameborder="0" width="480" height="376"> Your browser does not support inline frames or is currently configured not to display inline frames. </iframe></p> </td> </tr> <tr> <td><img border="0" src="../../img/telbotw.jpg" width="550" height="11"></td> </tr> </table> </td> <td align="center"> <a rel="nofollow" target="_blank" href="http://www.apple.com/quicktime/download/"> <img border="0" src="../../img/quicktimeani.gif" width="129" height="184"></a></td> </tr> <tr> <script> if ((screen.width = 1440) || (screen.width = 1400)) { document.writeln("<td valign=\"top\" width=\"100%\" background=\"\/images\/101online\/listening\/lesson16\/notebot2.gif\" width=\"450\" height=\"50\">"); } else if (screen.width <= 1280) { document.writeln("<td valign=\"top\" width=\"100%\" background=\"\/images\/101online\/listening\/lesson16\/notebot.gif\" width=\"294\" height=\"50\">");; } </script> </td> <td valign="bottom"> </td> </tr> <tr> <td valign="bottom" width="100%"> <div align="right"> <table border="0" cellpadding="5" style="border-collapse: collapse" id="table3926"> <tr> <td align="center"> <a onmousedown="soundManager.play('piano','../../media/mp3/piano.mp3'); return true;" href="javascript: goFull('FULLSCREEN/lesson1full.html','info','width=1020,height=760,left=0,top=0,toolbar=no,scrollbars=no,status=no,directories=no,menubar=no,location=no,resizable=no');"> <img src="../../img/poster1ani.gif" border="0" width="95" height="29"></a> <b><font size="1" face="Arial" color="#000080"> ON DISK</font></b></td> <td align="center"><b><font size="1" face="Arial" color="#000080">OR </font></b> <a onmousedown="soundManager.play('piano','../../media/mp3/piano.mp3'); return true;" href="javascript: goFull('CDRIVE/lesson1Cfull.html','info','width=1020,height=760,left=0,top=0,toolbar=no,scrollbars=no,status=no,directories=no,menubar=no,location=no,resizable=no');"><img src="../../img/poster7.bmp" border="0" width="53" height="30"></a> <b><font size="1" face="Arial" color="#000080"> DRIVE</font></b></td> </tr> </table> </div> </td> <td valign="bottom"> <iframe name="sounds" src="../../pagesounds.html" width="160" height="66" marginwidth="1" marginheight="1" scrolling="no" border="0" frameborder="0"> Your browser does not support inline frames or is currently configured not to display inline frames. </iframe></td> </tr> </table> Any light on this would be most welcome! I am trying to get my script working in FF, IE and Opera but the getAttribute isn't working for me. The domain name isn't getting picked up I have tried this: var dom_name = document.getElementById('dom_nm').getAttribute("value",2); and this: var dom_name = document.getElementById('dom_nm').getAttribute('value'); After this I use the domain name like this: Code: if (per2 == 0) { item_desc = "Domain Name and DNS set up. Domain: "+dom_name+" Period: "+per1+"year"+" No Privacy."; } if (per2 > 0){ item_desc = "Domain Name and DNS set up. Domain: "+dom_name+" Period: "+per1+"year"+" Including: Privacy: "+per2+"year."; } document.getElementById('item_pay').setAttribute("value","item_desc"); ( I also tried: Code: document.getElementById('item_pay').setAttribute('value') = item_desc; but that didn't seem to work either ) The HTML is like this: Code: <div style="margin: 5px auto;"> <table> <th>Your New Domain Name Order</th> <tr><td>Product</td><td>Cost</td><td>Years (max. 10)</td><td style="text-align: right;">Total Cost</td></tr> <tr><td id="dom_nm" value="John.Doe"><?php echo "Domain: $N_dom.$N_tld" ?></td><td id="price" value = '<?php echo "$priceN" ?>' ><?php echo $priceN ?></td><td><input style="background-color: yellow; font-weight: bold;" type='TEXT' id="per_1" size = '10' value = '<?php echo "$period_1" ?>' ></td><td><input type='TEXT' id="total_1" style="text-align: right;" value = '<?php echo "$total_1" ?>'></td></tr> <tr><td>Domain Privacy</td><td>8.70</td><td><input style="background-color: yellow; font-weight: bold;" type='TEXT' id="per_2" size = '10' value = '<?php echo "$period_2" ?>'></td><td><input type='TEXT' id="total_2" style="text-align: right;" value = '<?php echo "$total_2" ?>'></td></tr> <tr><td>Total Order.</td><td> --- </td><td> --- </td><td><input type='TEXT' id="total_3" style="text-align: right; font-weight: bold;" value = '<?php echo "$total_3" ?>'></td></tr> </table> </div> The result is that I get a zero ( 0 ) where the domain should be. Like this: Domain Name and DNS set up. Domain: 0 Period: 2year Including: Privacy: 2year. Plus Free Blog Install. Any ideas what I am doing wrong ? Thanks Code: <script> function myfunction(){ document.getElementById('myDIV').style.marginLeft++; } </script> <body> <div id="myDIV"> This is a DIV... </div> <p> <a href="javascript:myfunction()">Do it!!</a> So, what this code is supposed to do is, every time the user click on 'Do it!!', the 'myDIV' div goes to the right. The problem is, it works only one time, why? Greetings and salutations. My text and what I have been researching on the internet has not been very helpful in determining the code that I need to prevent a user from entering his/her information more than once. Here is my current code Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD.HTML 4.01 Transitional//EN" "http://www.w3.org/TR/htm14/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Kudler Fine Foods Contact Page</title> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1"> <!---Kami Demnyan 21 December 2009--> <script type="text/javascript"> /*<![CDATA[*/ <!--This code ensures that the zip code and telephone numbers are actual numerical digits, not letters--> function checkForNumber(fieldValue) { var numberCheck = isNaN(fieldValue); if (numberCheck == true) { window.alert ("Please enter a numerical value"); return false; } } <!--This code ensures that all of the fields contain text and I have it functioning now--> function submitForm() { if (document.forms[0].name.value == "" || document.forms[0].address.value == "" || document.forms[0].city.value == "" || document.forms[0].state.value == "" || document.forms[0].zip.value == "" || document.forms[0].phone.value == "" || document.forms[0].email.value == "") { window.alert("Please enter your missing information"); return false; } else return true; } function getCookie(NameOfCookie) { if (document.cookie.length > 0) { begin = document.cookie.indexOf(NameOfCookie+"="); if (begin != -1) { begin += NameOfCookie.length+1; end = document.cookie.indexOf(";", begin); if (end == -1) end = document.cookie.length; return unescape(document.cookie.substring(begin, end)); } } return null; } function setCookie(NameOfCookie, value, expiredays) { var ExpireDate = new Date (); ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000)); document.cookie = NameOfCookie + "=" + escape(value) + ((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString()); } function delCookie (NameOfCookie){ if (getCookie(NameOfCookie)) { document.cookie = NameOfCookie + "=" +"; expires=Tues, 02-Feb-10 00:00:01 GMT"; } } /*]]>*/ </script> </head> <body> <h1> KUDLER FINE FOODS </h1> <h2> JOIN OUR MAILING LIST</h2> <!--This is where the user will input all of their information to join the mailing list--> <form action="completeform.html" method="get" onsubmit="return submitForm();" enctype="application/x-www-form-urlencoded"> <p>Name<br /> <input type="text" name="name" size="50" /></p> <p>Address<br /> <input type="text" name="address" size="50" /></p> <p>City, State, Zip <br /> <input type="text" name="city" size="30" /> <input type="text" name="state" size="3" /> <input type="text" name="zip" size="10"; onchange="return checkForNumber(this.value)"; /></p> <p>Telephone<br /> <input type="text" name="phone" size="25" onchange="return checkForNumber(this.value)"; /></p> <p>Email Address<br /> <input type="text" name="email" size="50" /></p> <!--This is where the submit and reset buttons are located--> <p><input type="submit" value="Submit Form" /> <p><input type="reset" value="Reset Form" /> </form> </body> </html> I have created a new web page to link the duplicate cookie too, titled doubleinfo.html. This is what I am using to let the user know that their information has already been entered. My text is telling me that I need to look for a nextform() function, but I didn't have to write one so what would I need to do, if anything, to start the document.cookie = "name" codes? Any help would be greatly appreciated, thanks in advance. Alright well Hello, I currently have a table that shows a background image and I have 1 TD with 100% width and height and in that TD I have a DIV that moves by margin-left and margin-top via JavaScript and the height is approx 20px by 20px, so basically I have a map with a character that moves when keys are pressed. My problem is I'm having trouble setting limits (where the character cannot go inside the TD). etc if it reachs a X and Y then it would stop, but it's not that easy, I currently have this in a IF function when the keys are pressed: Code: var x; var y; var exclude = { x: [50, 50, 50, 50, 50], y: [50, 60, 70, 80, 90] }; if (exclude.x.indexOf(x) !== -1 && exclude.y.indexOf(y) !== -1){ // dismiss } else { //run main code.. } But that code doesn' work correctly because I want the numbers in exclude.x to match the oppisite of exclude.y so 50 and 50, 50 and 60 but instead its like this 50 and 50 or 60 or 70 or 80 or 90. I just want it to be set so it matches the number... Code: x: [1, 2, 3, 4, 5], y: [1, 2, 3, 4, 5] Hope you can help I've been having trouble for awhile now, thanks. Hello! I have a superclass where I create a "div" element as a property and then proceed to try and set the element's "id" attribute in a subclass. Interestingly, if I create multiple instances of the subclass with different "id"s, they all end up having the last "id" I specify. I would like it if they retain the individual "id" I specify. Here is the code. Code: function Drag() { this.ele = document.createElement("div"); } function Icon(id) { this.ele.id = id; } Icon.prototype = new Drag(); var hello = new Icon("hello"); var goodbye = new Icon("goodbye"); I am a newbie and am writing a function. I want the function to refer to an arrays elements to get the biggest, but I dont know how to do this. Here is the code: Code: function unique(first,second,third) { var answer; if (first > second) { answer = first - second; } if (second > third) { answer = second - third; } if (third > first) { answer = third - first; } return answer; } //function call unique (digitArray(0,1,2)); what I am trying to do, is get the array elements to be called and give me an answer. Will I need to add the array to the function? It is further down the code after the function at the moment. Or will I need to add the array elements to the function? Hope it is clear What I'm trying to do is to do something similar to what this person wanted on their question: http://www.webmasterworld.com/javascript/3338586.htm I already have it so when the user clicks on one of the links, then it changes to the active class. But now I would like to have the first link already have the active class (which is the effect the links will have when the user clicks on it) and then have the same effect happen thereafter the user clicks on the links. Here is the Javascript: Code: <script type="text/javascript"> var hrefs=document.getElementsByTagName("a"); var hrefs=document.getElementsByClassName("links"); var preA=""; for(var i=0;i<hrefs.length;i++){ hrefs[i].onclick=function(){ if(preA!="" && preA!=this){ preA.className="links"; } this.className="active"; preA=this; } } </script> Here is the CSS: Code: a.links:link { color: #FFF; text-decoration: none; } a.links:hover { color: #96C; text-decoration: none; } a.active { color: #96C; text-decoration: none; } Here is the HTML: Code: <a class="links" href="#">Curriculum Vitae</a> | <a class="links" href="#">Teaching Philosophy</a> | <a class="links" href="#">Artist Statement</a> |