Solved

why dynamicllay id change for div tag  is not work ing properly ?

Posted on 2010-11-08
13
235 Views
Last Modified: 2012-05-10
Hi ,

I i have 2  div tag


if i click i call some java script method and  do dynamicaly change the id of the both div .
buyLV3 dynamcalliy changed but c2 is not changing .

 document.getElementById("c2").id = 'c3';
       document.getElementById("buyLV3").id = 'buyLV2';

c2,c3,buLV3,buyLV2 are there is CSS file

<div id="buyLV3" class="divider" ></div>  

<div id="c2" class="controls">  

  <input type="button" value="<" size="2" onclick="back();"> 

     <input type="button" value=">" size="2" onclick="front();">

</div>

Open in new window

0
Comment
  • 5
  • 4
  • 2
  • +1
13 Comments
 
LVL 14

Expert Comment

by:sam2912
ID: 34086554
You might want to check if there are multiple elements with same ID.
0
 
LVL 20

Author Comment

by:Sathish David Kumar N
ID: 34087214
That only one div c2 and c3 id is not assign for any div tag ...
in java script junction only i assign
0
 
LVL 14

Expert Comment

by:sam2912
ID: 34088157
From what I can see in the provided info, it should work. You might want to consider providing more information like a link to the page or upload the whole page HTML here.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 34089659
Try :

document.getElementById("c2").setAttribute("id", 'c3');
document.getElementById("buyLV3").setAttribute("id", 'buyLV2');
0
 
LVL 20

Author Comment

by:Sathish David Kumar N
ID: 34090676
sam and leakim check this below code
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

    pageEncoding="ISO-8859-1"%>

<!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=ISO-8859-1">

<title>Insert title here</title>

 <script type="text/javascript">

 



 function back()

{

	var a= document.getElementById("divCount").value;

	alert(a);

	if(a==1)

	 {

		

	 }

	if(a==2)

	 {

		

		document.getElementById("buyLV2").setAttribute("id", 'buyLV1'); 

		document.getElementById("divCount").value = parseInt(a)-1; 

		alert( document.getElementById("divCount").value);



	 }

	 if (a==3)

	 {

		 alert("inside");

		 document.getElementById("buyLV3").setAttribute("id", 'buyLV2'); 

		 document.getElementById("divCount").value=parseInt(a)-1; 

		 alert( document.getElementById("divCount").value); 



	 }

}



function front()

{

	 document.getElementById("buyLV3").id = 'buyLV4';



}

</script>

 <style type="text/css">  

<!--  

.box {  

        position:absolute;  

        width:50px;  

        height:170px;  

        z-index:11;  

}  

.yellow {  

        background-color:#FF0;  

}  

.orange {  

        background-color:#FC6;  

}  

.green {  

        background-color:#9F9;  

}  

.blue {  

        background-color:#3CC;  

}  

#appDiv1 {  

        left:340px;  

        top:150px;  

}  

#appDiv2 {  

        left:420px;  

        top:150px;  

}  

#appDiv3 {  

        left:500px;  

        top:150px;  

}  

#appDiv4 {  

        left:580px;  

        top:150px;  

}  

#appDiv5 {  

        left:660px;  

        top:150px;  

}  

#appDiv6 {  

        left:340px;  

        top:350px;  

}  

#appDiv7 {  

        left:420px;  

        top:350px;  

}  

#appDiv8 {  

        left:500px;  

        top:350px;  

}  

#appDiv9 {  

        left:580px;  

        top:350px;  

}  

#appDiv10 {  

        left:660px;  

        top:350px;  

}  

.divider {  

        position:absolute;  

        background-color: #FF0000;  

}  

#buyLH1 {  

        left:310px;   

        top:340px;   

        width:440px;   

        height:3px;   

        z-index:22;   

        padding:1px; 

        line-height:0px; 

}  

#buyLV3 {  

        left:565px;  

        top:130px;  

        width:3px;  

        height:420px;  

        z-index:22;

        padding:1px;  

}  

#buyLV2 {  

        left:490px;  

        top:130px;  

        width:3px;  

        height:420px;  

        z-index:22;

        padding:1px;  

        margin: 0;

}



#buyLV4 {  

        left:645px;  

        top:130px;  

        width:3px;  

        height:420px;  

        z-index:22;

        padding:1px;  

} 

#buyLV1 {  

        left:410px;  

        top:130px;  

        width:3px;  

        height:420px;  

        z-index:22;

        padding:1px;  

} 

.controls {  

       position:absolute; 

        width:60px;  

        height:30px;  

        z-index:3;  

}  

#c1 {  

        left:103px;  

        top:287px;  

}  

#c2 {  

        left:545px;  

        top:555px;  

}  

 



-->  

</style> 

</head>

<body>

<form>

<fieldset>

<div id="appDiv1" class="box yellow"></div>  

				<div id="appDiv2" class="box yellow"></div>  

				<div id="appDiv3" class="box yellow"></div>  

				<div id="appDiv4" class="box green"></div>  

				<div id="appDiv5" class="box green"></div>  

				  

				<div id="appDiv6" class="box orange"></div>  

				<div id="appDiv7" class="box orange"></div>  

				<div id="appDiv8" class="box orange"></div>  

				<div id="appDiv9" class="box blue"></div>  

				<div id="appDiv10" class="box blue"></div>  

			 

			  <div id="buyLH1" class="divider">&nbsp;</div>  

				<div id="buyLV3" class="divider" ></div>  

                <div id="c1" class="controls">  

			  

				</div>  

				 <input type="hidden" id="divCount" name="divCount" value="3">

				<div id="c2" class="controls">  

				  <input type="button" value="<" size="2" onclick="back();"> 

			      <input type="button" value=">" size="2" onclick="front();">

			      

				</div> 

				</fieldset> 

</form>				

</body>

</html>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 34092155
front() can work only if you click on the ">" button the first time and it work only one time
back() work three time if you don't click on ">"

that's the logic of your current code. please confirm it work like that for you.
there's not problem to set id on my side
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 20

Author Comment

by:Sathish David Kumar N
ID: 34092285
>>> back() work three time if you don't click on ">"
no it wont work ...
Can you copy & paste my code and save as html file and try ....
1st time its working gd ...
2 nd time i press '<' button it wont work its not set the proper Id value ....



0
 
LVL 82

Expert Comment

by:leakim971
ID: 34092418
I did. Whats your browser and its version ?
0
 
LVL 6

Expert Comment

by:blueghozt
ID: 34092443
it won't work the second time as the id your front() method is looking for no longer exists (you changed it with your last click).

Why not use an iterative method for front() as you do for back()?

Using the div count is the only way to allow multiple clicks....

0
 
LVL 20

Author Comment

by:Sathish David Kumar N
ID: 34092478
@ leakim971: IE6
@blueghozt: How to use  iterative method ?
0
 
LVL 20

Author Comment

by:Sathish David Kumar N
ID: 34094580
Any update ??
0
 
LVL 6

Expert Comment

by:blueghozt
ID: 34094724
you asked how to use the iterative method you use for back() - in simple terms you are counting which div you are showing with the divCount value and decreasing this with each click on the back link - but you are not increasing it with the clicks on the front link

 try this (you may need to tweak depending on how many divs you end up with):


<script type="text/javascript">

 



 function back()

{

	var a= document.getElementById("divCount").value;

	alert(a);

	if(a==1)

	 {

		

	 }

	if(a==2)

	 {

		

		document.getElementById("buyLV2").setAttribute("id", 'buyLV1'); 

		document.getElementById("divCount").value = parseInt(a)-1; 

		alert( document.getElementById("divCount").value);



	 }

	 if (a==3)

	 {

		 alert("inside");

		 document.getElementById("buyLV3").setAttribute("id", 'buyLV2'); 

		 document.getElementById("divCount").value=parseInt(a)-1; 

		 alert( document.getElementById("divCount").value); 



	 }

}



function front()

{

	var a= document.getElementById("divCount").value;

	alert(a);

	if(a==1)

	 {

		document.getElementById("buyLV1").setAttribute("id", 'buyLV2'); 

		document.getElementById("divCount").value = parseInt(a)+1; 

		alert( document.getElementById("divCount").value);		

	 }

	if(a==2)

	 {

		

		document.getElementById("buyLV2").setAttribute("id", 'buyLV3'); 

		document.getElementById("divCount").value = parseInt(a)+1; 

		alert( document.getElementById("divCount").value);



	 }

	 if (a==3)

	 {

		 alert("inside");

		 document.getElementById("buyLV3").setAttribute("id", 'buyLV4'); 

		 document.getElementById("divCount").value=parseInt(a)+1; 

		 alert( document.getElementById("divCount").value); 



	 }



}

</script>

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 34095322
IE6...Ok.
FYI it work fine on FF, IE8, and Chrome.

You may use an additional class instead replacing the id.

The div : div id="buyLV" class="divider buyLV3"

We change the class, for example :

      if(a==2)
       {
            document.getElementById("buyLV").className = 'divider buyLV1';

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<title>Insert title here</title>
 <script type="text/javascript">
 

 function back()
{
	var a= document.getElementById("divCount").value;
	alert(a);
	if(a==1)
	 {
		
	 }
	if(a==2)
	 {
		document.getElementById("buyLV").className = 'divider buyLV1'; 
		document.getElementById("divCount").value = parseInt(a)-1; 
		alert( document.getElementById("divCount").value);

	 }
	 if (a==3)
	 {
		 alert("inside");
		 document.getElementById("buyLV").className = 'divider buyLV2'; 
		 document.getElementById("divCount").value=parseInt(a)-1; 
		 alert( document.getElementById("divCount").value); 

	 }
}

function front()
{
	 document.getElementById("buyLV").className = 'divider buyLV4';

}
</script>
 <style type="text/css">  
<!--  
.box {  
        position:absolute;  
        width:50px;  
        height:170px;  
        z-index:11;  
}  
.yellow {  
        background-color:#FF0;  
}  
.orange {  
        background-color:#FC6;  
}  
.green {  
        background-color:#9F9;  
}  
.blue {  
        background-color:#3CC;  
}  
#appDiv1 {  
        left:340px;  
        top:150px;  
}  
#appDiv2 {  
        left:420px;  
        top:150px;  
}  
#appDiv3 {  
        left:500px;  
        top:150px;  
}  
#appDiv4 {  
        left:580px;  
        top:150px;  
}  
#appDiv5 {  
        left:660px;  
        top:150px;  
}  
#appDiv6 {  
        left:340px;  
        top:350px;  
}  
#appDiv7 {  
        left:420px;  
        top:350px;  
}  
#appDiv8 {  
        left:500px;  
        top:350px;  
}  
#appDiv9 {  
        left:580px;  
        top:350px;  
}  
#appDiv10 {  
        left:660px;  
        top:350px;  
}  
.divider {  
        position:absolute;  
        background-color: #FF0000;  
}  
#buyLH1 {  
        left:310px;   
        top:340px;   
        width:440px;   
        height:3px;   
        z-index:22;   
        padding:1px; 
        line-height:0px; 
}  
.buyLV3 {  
        left:565px;  
        top:130px;  
        width:3px;  
        height:420px;  
        z-index:22;
        padding:1px;  
}  
.buyLV2 {  
        left:490px;  
        top:130px;  
        width:3px;  
        height:420px;  
        z-index:22;
        padding:1px;  
        margin: 0;
}

.buyLV4 {  
        left:645px;  
        top:130px;  
        width:3px;  
        height:420px;  
        z-index:22;
        padding:1px;  
} 
.buyLV1 {  
        left:410px;  
        top:130px;  
        width:3px;  
        height:420px;  
        z-index:22;
        padding:1px;  
} 
.controls {  
       position:absolute; 
        width:60px;  
        height:30px;  
        z-index:3;  
}  
#c1 {  
        left:103px;  
        top:287px;  
}  
#c2 {  
        left:545px;  
        top:555px;  
}  
 

-->  
</style> 
</head>
<body>
<form>
<fieldset>
<div id="appDiv1" class="box yellow"></div>  
				<div id="appDiv2" class="box yellow"></div>  
				<div id="appDiv3" class="box yellow"></div>  
				<div id="appDiv4" class="box green"></div>  
				<div id="appDiv5" class="box green"></div>  
				  
				<div id="appDiv6" class="box orange"></div>  
				<div id="appDiv7" class="box orange"></div>  
				<div id="appDiv8" class="box orange"></div>  
				<div id="appDiv9" class="box blue"></div>  
				<div id="appDiv10" class="box blue"></div>  
			 
			  <div id="buyLH1" class="divider">&nbsp;</div>  
				<div id="buyLV" class="divider buyLV3" ></div>  
                <div id="c1" class="controls">  
			  
				</div>  
				 <input type="hidden" id="divCount" name="divCount" value="3">
				<div id="c2" class="controls">  
				  <input type="button" value="<" size="2" onclick="back();"> 
			      <input type="button" value=">" size="2" onclick="front();">
			      
				</div> 
				</fieldset> 
</form>				
</body>
</html>

Open in new window

0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

861 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

30 Experts available now in Live!

Get 1:1 Help Now