|
JavaScript - Javascript Getelementbyid Within A Loop Problem
I have the following code...the getelementbyId works fine it changes the value in the textfield aswell....but only in the first retrieved record...It is not working in any of the other records that are showed.
Code is he <?php include("../connection/conn.php"); ?> <script type="text/javascript"> function notEmpty(){ var myTextField = document.getElementById('myText'); document.getElementById('myText').innerHTML = myTextField; if(myTextField.value != "") alert("You entered: " + myTextField.value) else alert("Would you please enter some text?") } </script> </head> <body> <?php $sql=mysql_query("select * from menuscript"); while($row=mysql_fetch_array($sql)) { ?> <div class="mine"> <?php echo $row['author'];?> <form> <input type='text' id='myText' /> <input type='button' onclick="notEmpty();" value='Form Checker' /> </form> </div> <?php }?> Similar TutorialsHello, 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 have created this statement and it does its job but not very efficient. How can I put this in a loop and populate the information that I want anonymously? I do not want to copy and paste this for every (id) there is on this page. Locate id get value and use same value to change the bgColor of the page Code: <input id="red" value="red">red
<input id="green" value="green">green
<script>
document.getElementById('red').addEventListener('click', function (e) {
inputColor = e.target.getAttribute('value'); document.bgColor = inputColor; }, true);
<script>
Your help will be much appreciated! Thanks! What I am trying to do is when a user click on an image button, 10 new windows will oppen. So, I created a For Loop function for that. Here is my code below: function clickk () { for (i=0; i<=10, i++) { window.open('annoying1.html','Annoying LOL','width=900, height=900') ;} } However, the window does open but not 10 times. Can you help me? Thank you... Hi Guys, I have a PHP loop region, which repeats all completed projects for each customer, then displays all jobsheets linked to those projects. I have a javascript show/hide function, which will only show the jobsheets when the project link is clicked. Without this javascript, the PHP loop works perfectly, but all the information is displayed. How can I use the show/hide function and still show all the jobsheets for completed projects? Code: function toggle2(id, link) {
var e = document.getElementById(id);
if (e.style.display == '') {
e.style.display = 'none';
link.innerHTML = '<img src="../Images/plus.gif" border="0" >';
} else {
e.style.display = '';
link.innerHTML = '<img src="../Images/minus.gif" border="0" >';
}
}
PHP Code: <table> <tr> <th>Project / Job</th> <th>Language</th> <th>Words (Net)</th> <th>Shipped</th> </tr> <?php $previousProject = ''; if ($totalRows_rsComplete_Cust > 0) { // Show if recordset not empty while ($row_rsComplete_Cust = mysql_fetch_assoc($rsComplete_Cust)) { if ($previousProject != $row_rsComplete_Cust['projid']) { // for every user, show the user name ?> <tr> <td colspan="4"><a href="#" onclick="toggle2('<?php echo $row_rsComplete_Cust['projid']; ?>', this)"><img src="../Images/plus.gif" border="0" /></a><?php echo $row_rsComplete_Cust['projid']; ?></td> </tr> <?php $previousProject = $row_rsComplete_Cust['projid']; } ?> <tr id="<?php echo $row_rsComplete_Cust['projid']; ?>" style="display:none"> <td><a href="jobsheet_details.php?id=<?php echo $row_rsComplete_Cust['jobid']; ?>&proj=<?php echo $row_rsComplete_Cust['projid']; ?>"><?php echo $row_rsComplete_Cust['jobname']; ?></a></td> <td>LANGUAGE</td> <td>WORD NET</td> <td>YES / NO</td> </tr> <?php }} // Show if recordset not empty ?> </table> In my program there is table which is retrieved and then there radio buttons, after selecting any radio button other columns get exapanded into textboxes to edit info. Now for expansion I have used div<id = > tag for each textbox and In javascript I have a function for showing textbox after clicking a radio button.In that I have used , arr.length=Length of the rows in table function edit1(el) { for(var i=0;i<arr.length;i++) { if(el.value==arr[i].value) { //document.getElementById("test[" + i + "]").value Not workking //document.getElementById('dname['+ i + ']').style.display = block"; Not working document.getElementById('dname').style.display = "block"; document.getElementById('dmarks').style.display = "block"; break; } else { document.getElementById('dname').style.display = "none"; document.getElementById('dmarks').style.display = "none"; } }//end for }//end if } In HTML, while($row1=mysql_fetch_array($rs1)) { echo "<tr>"; /*<td>44:<div id=d4 style="display:none;"><input type=text name=t4 id=idtext></div></td></tr><br>*/ ?> <td><input type="radio" name="select" value="<?php echo $row1['rollNo'];?>" onClick='updateRec(this);'><?php echo $row1['rollNo']; ?> <input type="radio" name="select" value="<?php echo $row1['rollNo'];?>" onClick='hiding(this);'>hide</td> <td><?php echo $row1['name']; ?><div id="dname[]" style="display:none;"><input type=text name="tname[]"></div></td> <td><?php echo $row1['marks']; ?><div id="dmarks[]" style="display:none;"><input type=text name="tmarks[]"></div></td> </tr><br> <?php } // end while ?> </table><br><br> Here I have to take array of div id's = "dname[]" but don't know the syntax for document.getElementById('dname').style.display = "block"; in which dname is array Plz help. 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] Alright so i've been trying to code a layout with multiple 'frames' . What I usually do is use the following script: Code: <center>
<script>
function changeNavigation(id)
{document.getElementById('navigate').innerHTML=document.getElementById(id).innerHTML}
</script>
<noembed>
<body>
</noembed>
And then add all the divs which are linked to an imagemap, like this: Code: <img src="IMAGE" width="HERE" height="HERE" border="0" usemap="#ImageMap1">
<div style="width:HEREpx; height:HEREpx; position:absolute; left:HEREpx; top:HEREpx; z-index:1; overflow:auto;"
id="HERE">
Blaa
</div>
<div style="display:none; overflow=none"; id="HERE">
And add as many as I need of these.
</div>
<map name="ImageMap1">
<area shape="HERE" coords="HERE" name="HERE"
onClick="changeNavigation('HERE')">
</map>
This always works fine when I have one 'navigation' frame. However this time I need to code a layout with multiple frames. I have tried starting a new script and linking to a new imagemap to do that. But what it does is it duplicates the image and the divs dont appear when clicking on a 'button'. This is the layout I am coding As you can see, each box has its own 'buttons' which should link to a div. I can do it for one of the boxes and its divs, but cant figure out how to do it for the others so it works. Did my best to make this sound non-confusing. Hopefully someone will be able to help. Code: onload=function() {progress1();}
var repeat=0;
function progress1() {
document.getElementById('clib').style.display="inline";
if (repeat<9) {
repeat=repeat+1;
setTimeout('progress1()',1000);
old = document.getElementById('cliba').innerHML;
document.getElementById('cliba').innerHML=old+'.';
}
else {
progress2();
}
}
var repeata=0;
function progress2() {
document.getElementById('wlib').style.display="inline";
if (repeata<23) {
repeata=repeata+1;
setTimeout('progress2()',1000);
old = document.getElementById('wliba').innerHML;
document.getElementById('wliba').innerHML=old+'.';
}
else {
progress3();
}
}
var repeatb=0;
function progress3() {
document.getElementById('dlib').style.display="inline";
if (repeatb<17) {
repeatb=repeatb+1;
setTimeout('progress3()',1000);
old = document.getElementById('dliba').innerHML;
document.getElementById('dliba').innerHML=old+'.';
}
else {
progress4();
}
}
var repeatc=0;
function progress4() {
document.getElementById('slib').style.display="inline";
if (repeatc<4) {
repeatc=repeatc+1;
setTimeout('progress4()',1000);
old = document.getElementById('sliba').innerHML;
document.getElementById('sliba').innerHML=old+'.';
}
else {
progress5();
}
}
var repeatd=0;
function progress5() {
document.getElementById('vlib').style.display="inline";
if (repeatd<17) {
repeatd=repeatd+1;
setTimeout('progress5()',1000);
old = document.getElementById('vliba').innerHML;
document.getElementById('vliba').innerHML=old+'.';
}
else {
progress6();
}
}
var repeate=0;
function progress6() {
document.getElementById('xlib').style.display="inline";
if (repeate<33) {
repeate=repeate+1;
setTimeout('progress6()',1000);
old = document.getElementById('xliba').innerHML;
document.getElementById('xliba').innerHML=old+'.';
}
else {
pyws();
}
}
var repeatf=0;
function pyws() {
document.getElementById('pyws').style.display="inline";
if (repeatf<7) {
repeatf=repeat+1;
setTimeout('pyws()',1000);
old = document.getElementById('pywsa').innerHML;
document.getElementById('pywsa').innerHML=old+'.';
}
}
HI.....idk why it is not working......when I load site, it will start counting, but dots after that .lib files.....look: http://ikoos.tk/load_os/ ......if you don't know what I mean....try to send me a PM. Thank you. Hi guys, I'm a bit new to all this javascript and of course I have a problem.. I have searched all the forums and none have helped me fix this problem.. js file: function buildTable (prodNum){ moo = document.GetElementById('showProd').insertRow(0); /*some crap code*/ } html code: <table id = "showProd" border ="3"></table> i keep on recieving from firebug an error saying GetElementById is not a function... any help will be greatly appreciated. thank you. i have the code in JS: Code: if(drop_list.value == "zed-catcher/11")
{
input_box.disabled=false;
var catcher_id = document.getElementById('lpm_service_catcher_id');
catcher_id.value = 11;
}
else
input_box.disabled=true;
how come the line catcher_id.value = 11; is not setting the value to 11???? i get that catcher_id = null???? pleas help thanks here's my javascript code
Code: <script type="text/javascript">
function sel(id){
document.getElementById(id).className="selected";
var getEls = document.getElementById("countrytabs").getElementsByTagName("a");
var getAgn = getEls;
for(var i=0; i<getEls.length; i++)
{
getEls[i].onclick=function()
{ for (var x=0; x<getAgn.length; x++)
{
getEls[i].className=getAgn[x].className.replace("selected", "");
}
}
}
}
</script>
<style>
a:hover {color: #FFFF00;}
.selected{color: #FFFF00;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 15px;
background-color: #ACAAAB;
border: 0px none #ACAAAB;
height: 20px;
width: 125px;
text-align: left;}
a{color: #333333;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
line-height: 15px;
background-color: #ACAAAB;
border: 0px none #ACAAAB;
height: 20px;
width: 125px;
text-align: left;}
</style>
here's my html code Code: <a href="#" class="selected" id="one" onclick="sel('one')">
Bharati Axa
</a><br />
<a href="#" id="two" onclick="sel('two')">
BPCL</a>
<br />
<a href="#" id="three" onclick="sel('three')">
Hypercity </a><br />
<a href="#" id="four" onclick="sel('four')">
Idea </a>
the problem is when i select a link the first time. it works fine. but when i select another link the next time the script does not work. Basically it works only once when page is loaded and then its not working at all. Its not showing any errors either. don't know whats happing.? Can someone please help me its urgent? Any help will be really gratefull! Hi, I think from what I have been reading that Firefox has quite a problem with some Javascript. We had this little script written for us which works great in IE but I have no clue how to get it to work with Firefox. Any ideas would be greatly appreciated! Code: <script type="text/javascript">
<!--
function getObject(obj) {
var theObj;
if(document.all) {
if(typeof obj=="string") {
return document.all(obj);
} else {
return obj.style;
}
}
if(document.getElementById) {
if(typeof obj=="string") {
return document.getElementById(obj);
} else {
return obj.style;
}
}
return null;
}
function checkqty(item1,item2) {
var item1Obj=getObject(item1);
var item2Obj=getObject(item2);
if (item1Obj.checked == true) {
item2Obj.value = "1";
}
else if (item1Obj.checked == false) {
item2Obj.value = "0";
}
}
//-->
</script>
<input type="checkbox" name="item2" value="012345" onClick="checkqty('item2','quantity2');">
<input type="hidden" name="quantity2" value="0">
Hello everyone. As lame as this may sound, I can't for the life of me get the document by the id. All looks fine to me, but I get the following error that just simply doesn't make sense. Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0) Timestamp: Fri, 15 Jan 2010 01:37:06 UTC Message: Object required Line: 7 Char: 4 Code: 0 Here's the code... Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script type="text/javascript">
function doSomething() {
var elem = document.getElementById('doFade');
alert(elem.src);
}
window.onload = doSomething();
</script>
</head>
<body>
<img src="/images/aero.jpg" id="doFade" width="300" height="200" />
</body>
</html>
Hi, I have a choice of three market items and I want the value of the selected one to be sent to my form. My code is: Code: <script type="text/javascript">
function loadXMLDoc2(File,ID,Msg){
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
try{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
}
}
var params=Msg;
xmlhttp.open("POST",File,true);
xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>
</head>
<body>
<input type="radio" name="myitem" id="myitem" value="All;" onclick="OtherFunction()" />All
<br /><br />' <input type="radio" name="myitem" id="myitem" value="Shirts" onclick="OtherFunction()" />Shirts
<br /><br />
<input type="radio" name="myitem" id="myitem" value="Trousers" onclick="OtherFunction()" />Trousers
<br /><br />
<br /><br />
<input type="button" class="indent" name="submitB" id="submitB" value="Submit" onclick="loadXMLDoc2('insertMarket.php','txtHint', 'md='+encodeURI(document.getElementById('myitem').value))" />
<div id="txtHint"></div>
This doesn't work. I have tried giving them different ids, I have tried replacing the id with checked="id=\'myitem\'", I have tried getElementById(\'myitem.checked\'), I have tried getElementbyName. In my full page I have far more radio buttons, so I don't want to do a getElementById(\'myitem[0].checked || myitem[1].checked etc. I think the solution must be along these lines. But I have run out of alternatives to try. Needless to say as it currently stands it gives the last radio button's value, which means it doesn't like them having the same id, but when I tried changing how the id was applied, or called - ElementByName, FF gives the error message as id is null. Hello, I am having a problem with javascript code: Code: newWindow.document.getElementByID() where "newWindow" is a new "window" object opened up with an existing file in the same directory as the current file. The complete function looks like this: Code: function showStreamInFullScreenMode(stream_id) {
var params = "width=" + screen.width + ", height=" + screen.height + ", top=0, left=0" + "location=no, menubar=no, scrollbars=no," +
"resizable=no, toolbar=no, directories=no, fullscreen=yes";
var newWindow = window.open("fullscreenMode.html", "Fullscreen Mode", params, false);
var customScript = "initOpenTokSession(\"" + stream_id + "\");";
var scriptElement = newWindow.document.getElementById("customScript");
scriptElement.innerHTML = customScript;
if (window.focus) {
newWindow.focus();
}
}
The bolded line of code is what is producing the error: Quote: scriptElement is null Note that the file that is opened (fullscreenMode.html) does indeed have a <script> html element with the id "customScript" so there is no reason why scriptElement should be null. I would appreciate any help anyone could offer. Thanks in advance. Hi... I got an error: Object Required when I use this code: Code: var SubQty = document.getElementById("SubQty").value;
<input class='txt' type='text' name='SubQty[]' id='$joinId' size='12' style= 'border:none;' value=''/>
How can I get the value? Thank you Hi.. I have problem on how can I automatically display the output from the computation (Demanded Qty * Quantity), after or while I input Demanded Qty. I mean I input Demanded Qty, on below it will display the output also beside the SubItems. Sorry, if i post again my problem, because I have no idea on how can I solve this problem. here is my code: PHP Code: <?php error_reporting(0); date_default_timezone_set("Asia/Singapore"); //set the time zone $con = mysql_connect('localhost', 'root',''); if (!$con) { echo 'failed'; die(); } mysql_select_db("mes", $con); ?> <html> <title>Stock Requisition</title> <head> <link rel="stylesheet" type="text/css" href="kanban.css"> <script type="text/javascript"> function compute_quantity(){ var DemandedQty = document.getElementById('DemandedQty').value; var SubQty = document.getElementById('SubQty').value; var Quantity = document.getElementById('Quantity').value; SubQty = (DemandedQty * Quantity); } </script> </head> <body> <form name="stock_requisition" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"> <div> <table> <thead> <th>Items</th> <th>Sub Items</th> <th>Item Code</th> <th>Demanded Qty</th> <th>UoM</th> <th>Class</th> <th>Description</th> <th>BIN Location</th> </thead> <?php $DemandedQty = $_POST['DemandedQty']; $sql = "SELECT DISTINCT Items FROM bom_subitems ORDER BY Items"; $res_bom = mysql_query($sql, $con); while($row = mysql_fetch_assoc($res_bom)){ $Items = $row['Items']; $Items_ = substr($Items, 12, 3); echo "<tr> <td style='border: none;font-weight: bold;'> <input type='name' value='$Items_' name='Items_[]' id='Items' readonly = 'readonly' style = 'border:none;width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td> <td style='border:none;'> </td> <td style='border:none;'> </td> <td style='border: none;'><center><input type='text' name='DemandedQty[]' id='DemandedQty' value='' size='12' onkeyup = compute_quantity()></center></td> </tr>"; $sql = "SELECT Items, SubItems, ItemCode, UoM, Class, Description, BINLocation, Quantity FROM bom_subitems WHERE Items = '$Items' ORDER BY Items"or die(mysql_error()); $res_sub = mysql_query($sql, $con); while($row_sub = mysql_fetch_assoc($res_sub)){ $Items1 = $row_sub['Items']; $SubItems = $row_sub['SubItems']; $ItemCode = $row_sub['ItemCode']; $UoM = $row_sub['UoM']; $Class = $row_sub['Class']; $Description = $row_sub['Description']; $BINLocation = $row_sub['BINLocation']; $Quantity = $row_sub['Quantity']; echo "<input type='hidden' name='Quantity' id='Quantity' value='$Quantity'>"; echo "<tr> <td style='border: none;'> <input type='hidden' value='$Items1' id='Items1' name='Items1[]'></td> <td style='border: none;'> <input type='text' name='SubItems[]' value='$SubItems' id='SubItems' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td> <td style='border: none;'> <input type='text' name='ItemCode[]' value='$ItemCode' id='ItemCode' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td> <td style='border: none;'><center><input type='text' name='SubQty[]' id='SubQty' value='' size='12' style></center></td> <td style='border: none;' size='3'> <input type='text' name='UoM[]' value='$UoM' id='UoM' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;' size='3'></td> <td style='border: none;'> <input type='text' name='Class[]' value='$Class' id='Class' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td> <td style='border: none;'> <input type='text' name='Description[]' value='$Description' id='Description' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;' size= '30'></td> <td style='border: none;'> <input type='text' name='BINLocation[]' value='$BINLocation' id='BINLocation' readonly='readonly' style='border:none; width:auto;font-family: Arial, Helvetica, sans-serif;font-size: 1em;'></td> </tr>"; } } ?> </table> </div> </form> </body> </html> If you don't understand my issue feel free to ask me for further understanding. I'm sorry again I really need to solve this and i tried to google but I can't find the solution. Thank you so much Hi, This code uses the getElementById to change the background of certain <tr>'s. In a nutshell there are two buttons, the code checks which one has been clicked, then checks the background colour of a relevant <tr> and depending what it finds changes the colours of the cells. Works fine in Chrome and Firefox but not in IE and I'm now sorely vexed by it. Can anyone shed light on the solution please? Code: <script language="javascript" type="text/javascript">
function changeBackgroundColor(objDivID)
{
var backColor = new String();
if ( objDivID == "lifesciences" )
{
backColor = document.getElementById('claire').style.backgroundColor;
}
if ( objDivID == "healthcare" )
{
backColor = document.getElementById('adrienne').style.backgroundColor;
}
if(backColor.toLowerCase()=='#ffffff' || backColor.toLowerCase()=='rgb(255, 255, 255)')
// IE works with hex code of color e.g.: #eeeeee
// Firefox works with rgb color code e.g.: rgb(238, 238, 238)
// Thats why both types are used in If-condition below
{
if ( objDivID == "lifesciences" )
{
document.getElementById('david').style.backgroundColor = '#c0c0c0';
document.getElementById('claire').style.backgroundColor = '#c0c0c0';
document.getElementById('adrienne').style.backgroundColor = '#ffffff';
document.getElementById('karen').style.backgroundColor = '#c0c0c0';
document.getElementById('alice').style.backgroundColor = '#c0c0c0';
document.getElementById('kelly').style.backgroundColor = '#ffffff';
document.getElementById('sarah').style.backgroundColor = '#c0c0c0';
document.getElementById('carolyn').style.backgroundColor = '#c0c0c0';
document.getElementById('paul').style.backgroundColor = '#c0c0c0';
document.getElementById('kayleigh').style.backgroundColor = '#c0c0c0';
document.getElementById('tim').style.backgroundColor = '#c0c0c0';
document.getElementById('chantal').style.backgroundColor = '#c0c0c0';
document.getElementById('lee').style.backgroundColor = '#c0c0c0';
document.getElementById('lisa').style.backgroundColor = '#c0c0c0';
}
else
{
document.getElementById('david').style.backgroundColor = '#c0c0c0';
document.getElementById('claire').style.backgroundColor = '#ffffff';
document.getElementById('adrienne').style.backgroundColor = '#c0c0c0';
document.getElementById('karen').style.backgroundColor = '#c0c0c0';
document.getElementById('alice').style.backgroundColor = '#c0c0c0';
document.getElementById('kelly').style.backgroundColor = '#c0c0c0';
document.getElementById('sarah').style.backgroundColor = '#c0c0c0';
document.getElementById('carolyn').style.backgroundColor = '#ffffff';
document.getElementById('paul').style.backgroundColor = '#ffffff';
document.getElementById('kayleigh').style.backgroundColor = '#ffffff';
document.getElementById('tim').style.backgroundColor = '#c0c0c0';
document.getElementById('chantal').style.backgroundColor = '#c0c0c0';
document.getElementById('lee').style.backgroundColor = '#c0c0c0';
document.getElementById('lisa').style.backgroundColor = '#c0c0c0';
}
}
else
{
document.getElementById('david').style.backgroundColor = '#ffffff';
document.getElementById('claire').style.backgroundColor = '#ffffff';
document.getElementById('adrienne').style.backgroundColor = '#ffffff';
document.getElementById('karen').style.backgroundColor = '#ffffff';
document.getElementById('alice').style.backgroundColor = '#ffffff';
document.getElementById('kelly').style.backgroundColor = '#ffffff';
document.getElementById('sarah').style.backgroundColor = '#ffffff';
document.getElementById('carolyn').style.backgroundColor = '#ffffff';
document.getElementById('paul').style.backgroundColor = '#ffffff';
document.getElementById('kayleigh').style.backgroundColor = '#ffffff';
document.getElementById('tim').style.backgroundColor = '#ffffff';
document.getElementById('chantal').style.backgroundColor = '#ffffff';
document.getElementById('lee').style.backgroundColor = '#ffffff';
document.getElementById('lisa').style.backgroundColor = '#ffffff';
}
}
</script>
Hi, I am trying to show and hide different div objects on a webpage all with different ID's as you can see. Only the first object will work "('killstreakwin')", or any that is put first, none of the others work after that. It's not the HTML side, it's definatly the javascript function. I've tried to use a loop but I don't know how to implement it into something like this. Any help would be appreciated. This is the code I am using:- function windowOpen() { (document.getElementById('killstreakwin').style.visibility='visible'); (document.getElementById('standardwin').style.visibility='visible'); (document.getElementById('hardenedwin').style.visibility='visible'); (document.getElementById('veteranwin').style.visibility='visible'); (document.getElementById('prestigewin').style.visibility='visible'); (document.getElementById('perkswin').style.visibility='visible'); (document.getElementById('copycatwin').style.visibility='visible'); (document.getElementById('martyrdomwin').style.visibility='visible'); (document.getElementById('finalstandwin').style.visibility='visible'); (document.getElementById('painkillerwin').style.visibility='visible'); (document.getElementById('rankswin').style.visibility='visible'); (document.getElementById('prestigewin').style.visibility='visible'); (document.getElementById('primarywin').style.visibility='visible'); (document.getElementById('secondarywin').style.visibility='visible'); (document.getElementById('attachmentswin').style.visibility='visible'); } function windowClose() { (document.getElementById('killstreakwin').style.visibility='hidden'); (document.getElementById('standardwin').style.visibility='hidden'); (document.getElementById('hardenedwin').style.visibility='hidden'); (document.getElementById('veteranwin').style.visibility='hidden'); (document.getElementById('prestigewin').style.visibility='hidden'); (document.getElementById('perkswin').style.visibility='hidden'); (document.getElementById('copycatwin').style.visibility='hidden'); (document.getElementById('martyrdomwin').style.visibility='hidden'); (document.getElementById('finalstandwin').style.visibility='hidden'); (document.getElementById('painkillerwin').style.visibility='hidden'); (document.getElementById('rankswin').style.visibility='hidden'); (document.getElementById('prestigewin').style.visibility='hidden'); (document.getElementById('primarywin').style.visibility='hidden'); (document.getElementById('secondarywin').style.visibility='hidden'); (document.getElementById('attachmentswin').style.visibility='hidden'); } |
|||||||