JavaScript - Using Variables In Getelementbyid
I have this code:
Code: var player = 100; var part1 = ('ctl00_cphRoblox_TabbedInfo_GamesTab_RunningGamesList_RunningGamesListView_ctrl0_ctl00_PlayersRepeater_ct'); var part2 = ('_PlayerImage1'); var final = part1 + player + part2; var name = document.getElementById(final) The variable (name) turns up null when I try to see what it is. But, it is, infact, an element on the page, and when I do it manually it works. Help? Similar TutorialsQuote: <html> <head> <script type="text/javascript"> var a = january var b = febuary var c = march function test() { document.getElementById("test").innerHTML=a; <!-- needs to be A on first function click, b on second, c on third, etc..^^--> } </script> </head> <body> <p id="test"></p> <!-- the <p> should go to next month upon each function --> <input type="button" value="asdf" onclick="test()" /> </body> </html> I tried to explain it pretty well in the comment tags, thanks! Hopefully some of you guys can help. I'm self taught in Javascript so only know little bits here and there (and don't even know if the thread title is labelled right for what I'm doing!) so help would be greatly appreciated. I'm trying to create 4 buttons on a page (buttons shown by "click here to view c1, c2" etc.) however after I've clicked one button and the content is showing below, the content from the next button clicked does not show (almost as if it is hidden underneath). I'm looking for a way of showing the content when the button is clicked, but hiding it once another button is clicked so other content is shown. Hopefully this is clear enough. All help, tips or advice will be appreciated. Thankyou. Code: <script type="text/javascript" language="JavaScript"><!-- function InsertContent(tid) { if(document.getElementById(tid).style.display == "none") { document.getElementById(tid).style.display = ""; } else { document.getElementById(tid).style.display = "none"; } } //--></script> <table width="100%" cellspacing="4" cellpadding="4" border="0" align="center"> <tbody> <tr> <td width="25%"><a href="javascript:InsertContent('c1');"> Click to see C1</a></td> <td width="25%"><a href="javascript:InsertContent('c2');"> Click to see C2</a></td> <td width="25%"><a href="javascript:InsertContent('c3');"> Click to see C3</a></td> <td width="25%"><a href="javascript:InsertContent('c4');"> Click to see C4</a></td> </tr> </tbody> </table> <hr /> <div style="display: none; border: 0px dashed black; background-color: white; color: black; font-weight: bold; padding: 5px; margin: 5px;" id="c1">CONTENT C1 </div> <div style="display: none; border: 0px dashed black; background-color: white; color: black; font-weight: bold; padding: 5px; margin: 5px;" id="c2">CONTENT C2 </div> <div style="display: none; border: 0px dashed black; background-color: white; color: black; font-weight: bold; padding: 5px; margin: 5px;" id="c3">CONTENT C3 </div> <div style="display: none; border: 0px dashed black; background-color: white; color: black; font-weight: bold; padding: 5px; margin: 5px;" id="c4">CONTENT C3 </div> hi, In my code below, I cannot get the setting_id value as it falls outside of the loop. I have just tried to put in the getElementById function but it's not working?! I get the error: missing ) after formal parameters JavaScript from this: Code: function confirmqualification(ID) { to this: Code: function confirmqualification(document.getElementById('setting_id')) { HTML from this: Code: <input type="button" name="remove" id="remove" value="Remove" onClick="javascript:confirmqualification('<?php echo $row1['setting_id']?>')" /> to this: Code: <input type="button" name="remove" id="remove" value="Remove" onClick="javascript:confirmqualification()" /> hi quick question, i have 640 hidden html inputs like this but with different names. <input type="hidden" name="b1r1c1" value"some value"> now i want to use document.getElementById('b1r1c1).value = "whatever"; will that work eventhough there is no id on my hidden value. it will be in a hta by the way. thanks Hello smart people... perhaps someone can figure this one out. I hope it's not a PHP question. I have a form and need to populate FIELD2 with the result of FIELD1. Field one is a dynamic list from a database, where the value is an ID#, but the list shows the name. I want to populat FIELD2 with the name that is chosen, not the id (I can't get anything to work) Here is the code from the 2 fields: FIELD 1: Code: <select name = "" realname = "{#role#}" required="1" exclude = "-1" id = "roleselect"> <option value="-1" selected="selected">Choose</option> <option value = "{$roles[role].ID}" id="role{$roles[role].ID}">{$roles[role].name}</option> FIELD 2: Code: <input type="hidden" name="rolename" id="rolename" required="0" realname="rolename" /> Here is the javascript I tried to populate field 2 with the selected option of field 2: Code: function updaterole(){ document.getElementById("rolename").value =document.getElementById("role").value; I tried using name instead of value for field 1, but that didn't work either. The db just shows empty. thanks for any help! Any help would be greatly appreciated! I'm using javascript to create a slideshow of images with thumbnails. The slideshow works fine, the titles show up great, but my problem arises when I try to replace the href source of a div. [larger], specified in the js is supposed to be replacing the current a href source, but it isn't working. This is the javascript that controls the slideshow: Code: var current = 0; function swapimg( show ){ var piece = new Array(); var title = new Array(); var larger = new Array(); var meta = new Array(); piece[0] = '../assets/images/nokia/nokia01.jpg'; title[0] = '[ One ]'; larger[0] = '../assets/images/nokia/nokia01_big.jpg'; piece[1] = '../images/nokia/nokia02.png'; title[1] = '[ Two ]'; larger[1] = '../assets/images/nokia/nokia02_big.jpg'; piece[2] = '../assets/images/nokia/nokia03.png'; title[2] = '[ Three ]'; larger[2] = '../assets/images/nokia/nokia02_big.jpg'; piece[3] = '../assets/images/nokia/nokia04.png'; title[3] = '[ Four ]'; larger[3] = '../assets/images/nokia/nokia02_big.jpg'; document.getElementById( 'featured' ).src = piece[show]; document.getElementById( 'featured' ).alt = title[show]; document.getElementById( 'featuretitle' ).innerHTML = title[show]; document.getElementById( 'featuremeta' ).innerHTML = meta[show]; document.getElementById( 'featurelarger' ).href = larger[show]; for( i = 0; i < meta.length; i++ ){ document.getElementById( 'item' + i ).style.opacity = '.5'; } document.getElementById( 'item' + ( show ) ).style.opacity = '.99'; current = ( show ); } And this is the portion of the html that is supposed to be working with the [larger], but I'm having troubles with: Code: <div class="featurelarger"><a href="../assets/images/nokia/nokia01_big.jpg" id="featurelarger" class="thickbox" title="Windowcling" rel="gallery-art" >view larger</a></div> Any help would be greatly appreciated, thank you in advance! I have a html file and a separate javascript file. The html file contains: <input type="reset" id = "resetButton" /> I want a message to pop up if the reset button is pressed. So in the js file I have: document.getElementById("resetButton").onclick = doAlert; doAlert is a function that simply does: alert("Do you want to reset?"); I know my separate js file is linked correctly because if I just put in alert("hello"); in the js file then it works. But if I use the document.getElementById thing in the js file, then there is an error. The error, according to the error console, says that "resetButton" is null. Can someone help me? thanks! btw, I'm totally new to programming...and I need to do this for my homework assignment Hi - Code: function EvalSound(soundobj) {// this passes the sound to be played to the java applet embedded in the html file and plays it. see ref: http://www.phon.ucl.ac.uk/home/mark/audio/play.htm document.getElementById(soundobj).Play(); } I get a firebug error message 'getElementB...ay is not a function'. However, this error only occurs on my machine at work where I am running Firefox for U3 (updated to FF 3.5.5) - U3 is a SanDisc flash drive. When I run the same code on FF 3.5.5 from home there is no error. The code works in all other browsers I've tested (IE6, IE8, Chrome). The page is http://dermdudes.com/counter/keycounter.html Please provide feedback if the page does not work for you. Please help. Thanks, Jim I am using javascript for adding and removing rows from table as per user require ment like if we press ADDROW button it adds extra row to table and if we pressREMOVEROW it delets the last row.. Now i want to access the data from textbox like this.. var crpt = document.getElementById("itrtr2").value; //no. of rows for(var k=1;k<=crpt;k++) { qtyc = document.getElementById("txtRowc3"+k).value; unit_pricec = document.getElementById("txtRowc5"+k).value; alert('QTYC:'+qtyc+' UPC:'+unit_pricec); cttl = qtyc * unit_pricec; document.getElementById("txtRowc6"+k).value = cttl.toFixed(2); csbttl = csbttl + cttl; } document.getElementById("subttlC").value=csbttl.toFixed(2); it shows the value of textRowc3i in qtyc in alert box but also givs error document.getElementById("txtRowc3"+k) is null.. I tried for this but problem is not solved please help... Thank You... why is getElementById not working?? pls try it and tell me if you get a hit on document.getElementById("t1"); thanks Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Tester code</title> <script type="text/javascript"> console.log("sfsg"); var e = document.getElementById("t1"); var c = e.firstChild; console.log(c); </script> </head> <body> <table> <tr> <td id="t1"><img id="img1" src="SharkSq1.png">3</td> </tr> </table> </body> </html> Hi, quick question: Code: function x() { document.getElementById('myid').width += 200; } This works for "myid", but my document contains "myid1", "myid2", "myid3", and so forth. How can I alter the script to effect every instance of "myid" followed by a number? Hey guys, Thanks for taking the time to read my post. I am not new to programming or scripting, but I am completely new to javascript and web-based code. Hopefully you guys could help me understand what is going on and maybe help me figure out what I am trying to do. What I am trying to do: -There is an element that has a value <td class="flashField" onmouseover="clearAnswer()"> <div id="flashAnswer" onmouseover="clearAnswer()">answer string here</div> </td> -There is a text box that needs to have the answer above given to it <td class="flashField"> <input type="text" tabindex="1" onkeypress="clearAnswer()" name="q" maxlength="256" size="50"> </td> -There is a next button that needs to be executed <td align="right"> <input type="image" tabindex="2" alt="Next" src="http://website.com/images/next.gif"> </td> So what I am trying to do is create a script through Greasemonkey that will automatically do these things. I am starting small and trying to just get the value of flashAnswer to appear as an alert on the screen by using this code: var answer = document.getElementById('flashAnswer'); alert(answer); But the problem is it posts some weird value ([object XrayWrapper [object HTMLDivElement]]) that most definitely is not "answer string here" and is a bit above me at this point. Any ideas? Any help would be great guys! Thanks! -ellosiph Hi, I am new to javascript. Been picking up bits and parts but am bumping my head against walls. Have table with 4 cols and 2 rows - header row and 2nd row with 3 input text boxes and 1 option list. Have an array to adds rows to table when user clicks button-max-3 more rows. Option list not a problem-propagates values. Row 1 - 1st and 2nd input boxes linked to JQuery for datapicker and 4th calls js validation for numeric input. When user adds row those links are not there-which is what I need. Array cites input boxes with name and iteration of +1 for each added row. Should I use, in the array, document.getElementById('startdate0'; document.getElementById('startdate1'); etc., or should I use keyword this? And if I use this, how is it applied? I do not know how to declare these variables for recognition. Tried several methods without success. Following is array: Code: <script language="Javascript" type="text/javascript"> /*<![CDATA[*/ var new_rows=new Array(); var row_count=0; function addRow() { var tbl = document.getElementById('ReqDtTbl'); new_rows[row_count]=new Array(); var lastRow = tbl.rows.length; var iteration = lastRow; if (lastRow>4){ return;} var row = tbl.insertRow(lastRow); var cellLeft = row.insertCell(0); var textNode = document.createElement('input'); textNode.size = 7; textNode.name = 'startdate' + iteration; cellLeft.appendChild(textNode); new_rows[row_count]['cell']=textNode; var cellRight = row.insertCell(1); var el = document.createElement('input'); el.type = 'text'; el.name = 'enddate' + iteration; el.id = 'enddate' + iteration; el.size = 7; new_rows[row_count]['cell2']=el; cellRight.appendChild(el); // the last cell! var cellRightSel = row.insertCell(2); var sel = document.createElement('select'); sel.name = 'TypeHrs' + iteration; sel.options[0] = new Option('-Select-', '""'); sel.options[1] = new Option('Comp Time', 'Comp Time'); sel.options[2] = new Option('Credit Hrs', 'Credit Hrs'); sel.options[3] = new Option('Overtime', 'Overtime'); sel.options[4] = new Option('Rel Comp', 'Rel Comp'); cellRightSel.appendChild(sel); new_rows[row_count]['cell3']=sel; var cellRight = row.insertCell(3); var el = document.createElement('input'); el.type = 'text'; el.name = 'No. of Hours' + iteration; el.id = 'No. of Hours' + iteration; el.size = 7; cellRight.appendChild(el); new_rows[row_count]['cell']=el; row_count++; } function removeRow() { // grab element again var tbl = document.getElementById('ReqDtTbl'); // grab length var lastRow = tbl.rows.length; // delete last row if there is more than one row if (lastRow > 2) tbl.deleteRow(lastRow - 1); } /*]]>*/ </script> Input box for date is: Code: <input style="width: 70px" type="text" id="startdate"> Function is: Code: <script type="text/javascript"> $(function() { $("#startdate").datepicker(); $("#enddate").datepicker(); $("#RcompStart").datepicker(); $("#RcompEnd").datepicker(); }); </script> Input for numeric is: Code: <input type="text" name="No. of Hours" id="No. of Hours" style="width: 70px;" onblur="checkQuarters(this);" /> And numeric validation function is: Code: <script type="text/javascript"> function checkQuarters( fld ) { var val = parseFloat(fld.value); if ( isNaN(val) || ( val*4 != Math.floor(val*4) ) ) { alert("Value must be a numeric and a multiple of 0.25"); return false; } return true; } </script> Thanks - John I have a form that is used to insert a new classified ad or to update an existing ad. When the submit button is pressed a javascript function is called to validate the fields. Some of the fields are set as required. If the field is empty ( as form[i].value = '' ) then this sets an error flag and after all fields have been tested will display an alert and each field that has an error will be highlighted in red. This works great when a new ad is being created, but when the ad is being updated, and a required field is erased then it doesn't popup as an error, as if the script is just ignoring it. Here is the code snipit: Code: function submitbutton(mfrm) { var me = mfrm.elements; var r = new RegExp("[\<|\>|\"|\'|\%|\;|\(|\)|\&|\+|\-]", "i"); var r_num = new RegExp("[^0-9\.,]", "i"); var r_email = new RegExp("^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]{2,}[.][a-zA-Z]{2,3}$" ,"i"); var errorMSG = ''; var iserror=0; // set notification background color var warnColor = '#<?php echo $this->error_color; ?>'; // loop through all input elements in form for (var i=0; i < me.length; i++) { // check if element is mandatory; here mosReq="1" if ((me[i].getAttribute('mosReq') == 1)&&(me[i].style.visibility != 'hidden')) { if (me[i].type == 'radio' || me[i].type == 'checkbox') { var rOptions = me[me[i].getAttribute('name')]; var rChecked = 0; if(rOptions.length > 1) { for (var r=0; r < rOptions.length; r++) { if (rOptions[r].checked) { rChecked=1; } } } else { if (me[i].checked) { rChecked=1; } } if(rChecked==0) { errorMSG += me[i].getAttribute('mosLabel').replace(' ',' ') + ' : <?php echo html_entity_decode(addslashes(JText::_('COM_CLASSIFIEDSREDUX_REGWARN_ERROR')),ENT_QUOTES); ?>\n'; // notify user by changing background color, in this case to red me[i].style.background = warnColor; iserror=1; } } if ((me[i].value == '') || (me[i].value.length < 2)) { errorMSG += me[i].getAttribute('mosLabel').replace(' ',' ') + ' : <?php echo html_entity_decode(addslashes(JText::_('COM_CLASSIFIEDSREDUX_REGWARN_ERROR')),ENT_QUOTES); ?>\n'; me[i].style.background = warnColor; iserror=1; } } } if(iserror==1) { alert(errorMSG); return false; } } hi, on my site he http://www.mypubspace.com/default.php I am requesting the rsCounty by Ajax, I am then trying to do the same to the page number value using getElementByID, and building up the querystring, but it's not working properly, on my countypubs.php page which is what I an requesting to get the counties I have added the function again to try and get the PAGE Code: <script language="javascript" type="text/javascript"> function countyFunction(){ var countyRequest; // The variable that makes Ajax possible! try{ // Opera 8.0+, Firefox, Safari countyRequest = new XMLHttpRequest(); } catch (e){ // Internet Explorer Browsers try{ countyRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try{ countyRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e){ // Something went wrong alert("Your browser broke!"); return false; } } } // Create a function that will receive data sent from the server countyRequest.onreadystatechange = function(){ if(countyRequest.readyState == 4){ var ajaxDisplay = document.getElementById('ajaxDiv'); ajaxDisplay.innerHTML = countyRequest.responseText; } } var name = document.getElementById('name').value; //var rsCounty = document.getElementById('rsCounty').value; var page = document.getElementById('page').value; var queryString = "?name=" + name + "&rsCounty=" + rsCounty + "&page=" + page; //Add the following line countyRequest.open("GET", "http://www.mypubspace.com/countypubs.php" + queryString, true); countyRequest.send(null); } </script> <?php $dbhost = "xxx"; $dbuser = "xxx"; $dbpass = "xxx"; $dbname = "xxx"; //Connect to MySQL Server mysql_connect($dbhost, $dbuser, $dbpass); //Select Database mysql_select_db($dbname) or die(mysql_error()); if ($msg <>"") { echo "<div class=\"ui-widget\"> <div style=\"padding: 0pt 0.7em;\" class=\"ui-state-error ui-corner-all\"> <p style=\"padding-top:18px;\"><span style=\"float: left; margin-right: 0.3em;\" class=\"ui-icon ui-icon-alert\"></span> <strong>Alert:</strong> $msg</p> </div> </div>"; } $county = $_GET["rsCounty"]; echo $county .'<br />'; $tableName="pubs"; $targetpage = "default.php"; $limit = 20; $query = "SELECT COUNT(*) as num FROM $tableName WHERE rsCounty = '$county'"; $total_pages = mysql_fetch_array(mysql_query($query)); $total_pages = $total_pages['num']; $stages = 3; $page = mysql_escape_string($_REQUEST['page']); if( isset($_REQUEST['page']) && ctype_digit($_REQUEST['page']) ) { $page = (int) $_GET['page']; $start = ($page - 1) * $limit; }else{ $start = 0; } // Get page data $query1 = "SELECT * FROM $tableName WHERE rsCounty = '$county' ORDER BY rsPubName Asc LIMIT $start, $limit"; $result = mysql_query($query1); // Initial page num setup if ($page == 0){$page = 1;} $prev = $page - 1; $next = $page + 1; $lastpage = ceil($total_pages/$limit); $LastPagem1 = $lastpage - 1; $paginate = ''; if($lastpage > 1) { $paginate .= "<span class='paginate'>"; // Previous if ($page > 1){ $paginate.= "<a onClick='countyFunction();' id='page' value='$prev'>previous</a>"; }else{ $paginate.= "<span class='disabled'>previous</span>"; } // Pages if ($lastpage < 7 + ($stages * 2)) // Not enough pages to breaking it up { for ($counter = 1; $counter <= $lastpage; $counter++) { if ($counter == $page){ $paginate.= "<span class='current'>$counter</span>"; }else{ $paginate.= "<a onClick='countyFunction();' id='page' value='$counter'>$counter</a>";} } } elseif($lastpage > 5 + ($stages * 2)) // Enough pages to hide a few? { // Beginning only hide later pages if($page < 1 + ($stages * 2)) { for ($counter = 1; $counter < 4 + ($stages * 2); $counter++) { if ($counter == $page){ $paginate.= "<span class='current'>$counter</span>"; }else{ $paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";} } $paginate.= "..."; $paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>"; $paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>"; } // Middle hide some front and some back elseif($lastpage - ($stages * 2) > $page && $page > ($stages * 2)) { $paginate.= "<a href='$targetpage?page=1'>1</a>"; $paginate.= "<a href='$targetpage?page=2'>2</a>"; $paginate.= "..."; for ($counter = $page - $stages; $counter <= $page + $stages; $counter++) { if ($counter == $page){ $paginate.= "<span class='current'>$counter</span>"; }else{ $paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";} } $paginate.= "..."; $paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>"; $paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>"; } // End only hide early pages else { $paginate.= "<a href='$targetpage?page=1'>1</a>"; $paginate.= "<a href='$targetpage?page=2'>2</a>"; $paginate.= "..."; for ($counter = $lastpage - (2 + ($stages * 2)); $counter <= $lastpage; $counter++) { if ($counter == $page){ $paginate.= "<span class='current'>$counter</span>"; }else{ $paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";} } } } // Next if ($page < $counter - 1){ $paginate.= "<a href='$targetpage?page=$next'>next</a>"; }else{ $paginate.= "<span class='disabled'>next</span>"; } $paginate.= "</span>"; } echo 'Pubs found: '.$total_pages; // pagination echo $paginate; ?> <div id="ajaxCountylist"> <div id="accordion"> <?php while($row = mysql_fetch_array($result)) { echo '<div><h3><a href="#">'.$row['rsPubName'].', '.$row['rsTown'].'</a></h3><div>'.$row['rsAddress'].'<br />'.$row['rsTown'].', '.$row['rsCounty'].'<br />'.$row['rsPostCode'].'<br /><br />Region: '.$row['Region'].'<br /><br />Telephone: '.$row['rsTel'].'<br /><br />'; echo '<button onclick="gohere(\'viewpub.php?PUBID='.$row['PUBID'].'\')" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">View Pub</span></button>'; echo '</div></div>'; } echo '<span style="float:right;">'.$paginate.'</span>'; ?> </div> </div> I have only applied teh function to the previous button and the first page numbers! I've spent three days trying to figure this out without any luck. What i am attemping to do is to open an unframed tab using the link from a frame id. I want to be able to enter a js command in the browser on the page then have it open in a new tab unframed or just reload the link unframed. These are the commands i have tried in my browser: javascript:<a herf="document.getElementById("netlinkx").childNodes[1].src;"> javascript:<a herf="window.location.href=document.getElementById("netlinkx").childNodes[1].src;"> javascript:<a herf=document.getElementById("netlinkx").children[0]>.setAttribute('id','this_one');alert(getFrame("this_one").body.innerHTML);> and a few others that didn't work. Hello, I am retrieving xml - that works well. It is when I use "getElementByID" that things go weird. I can scoop up the elements, but it gives me 4 copies of each. When I try to run thru the first one, it doesn't recognize it as an array. hmm. In otherwords.. lets say I do this. var test = somevars.getElementByID('shoes'); test then looks like this: [shoes shoes shoes shoes] If I click on each "object" (shoes) - then I get the FULL xml in each... so I figure, ok - I'll just grab the first and reiterate thru that. ie.. for y=1 etc.. test[0].length but that doesn't work. Do I have to then reach into the childNodes of this and grab the "shoes" elements? Not sure if I am explaining this correctly. this is what I have: Code: function fireAjax(){ new Ajax.Request( flashconfig.genXML, { method: 'get', contentType: "application/xml", onSuccess: function( transport ) { var shoeTags = transport.responseXML.getElementsByTagName( 'shoes' ); var spotlightView = $H(); for( var b = 0; b < shoeTags.length; b++ ) { $w('title description link linkName image').each( function(cs){ spotlightView[cs] = getNodeValue(shoeTags[b],cs); }); builddisplay(displayModule, spotlightView); } so shoeTags does get an array, but each element/object actually has ALL the shoe items in it - but then repeats... for the other array positions. I tried just grabbing the ".first" or [0] like so, but that didn't work. var shoeTags = transport.responseXML.getElementsByTagName( 'shoes' ).first; or var shoeTags = transport.responseXML.getElementsByTagName( 'shoes' )[0] Hello, I'm sorry if this has been asked before but I've been googling and looking in reference books for the last couple of days and just haven't been able to find an answer. I'm new to javascript and have just completed my first fully working script to crossfade images and have clickable links to go to a specific image, the code works perfectly when the code is inside of the html document with the elements but when you remove the javascript and put it in a seperate file its unable to get the value of the elements from the html. Is there a way to do this, give the document a alternative src to look in for the elements or something? An example below. Javascript snipit [CODE] imageId = "mainImage"; image = window.document.getElementById(imageId); alert(image); [CODE] image returns null. what I want it to return is the value fro the HTMl document that this file is included in. [CODE] <script type="text/javascript" src="fadeFunctions.js"> </script> </head> <body> <div id="imgHolder" style="position: absolute; top: 200px;"> <div id="topImage" style="position: absolute; top: 0px; left: 0px; z-index: 100;"><img id="mainImg" src="1.png" /></div> [CODE] Thanks for any help or suggestions that you can give. Hello, I need to do this. I have 36 Divs called "contenido1, contenido2, contenido3 etc.) And I want that "onclick" change a property of the css of all of them except 1. I know I can do this manually but its a lot of code lines so I think it would be another option to do ir in a loop. Right now i am using this: Code: div = document.getElementById('contenido1'); div.style.display='block'; div = document.getElementById('contenido2'); div.style.display='none'; div = document.getElementById('contenido3'); div.style.display='none'; div = document.getElementById('contenido4'); div.style.display='none'; .... So in that case I want for example that all the DIVS called "contenido 2 to contenido 36" display: none and only contenido 1 display block. In the next cases would be the same: All the divs called "contenido 1 to contenido 36" display: none except "contenido 2" that i want to display: block. So I can do it like this but are thousands of lines of code... and I am sure there are other more efficient option. Anybody knows how to do that? Probably is a simple question. Thank you!! I am writing some javascript that when the user clicks on a link, it hides or displays content inside a div tag. I have been trying to add some code that would only allow for one div tag to be displayed at a time. Here is where I originally got the code (http://www.willmaster.com/library/hi...-to-reveal.php) Whenever I run this code I get this error: Code: Error: document.getElementById(months[x]) is null Source File: /resources/default.js Line: 30 This is the JavaScript that runs when the user clicks the link: Code: <!-- function accordion(tid) { var x; var months = new Array(); months[0]="January"; months[1]="February"; months[2]="March"; months[3]="April"; months[4]="May"; months[5]="June"; months[6]="July"; months[7]="August"; months[8]="September"; months[9]="October"; months[10]="November"; months[11]="December"; for (x in months) { document.getElementById((months[x])).style.display = "none"; } if(document.getElementById(tid).style.display == "none") { document.getElementById(tid).style.display = ""; } else { document.getElementById(tid).style.display = "none"; }} //--> Here is where the javascript is activated from PHP Code: <a href=javascript:accordion('$month2');>$month2</a><br /> <div id='$month2' style='display: none';> Hello $month2 </div> |