Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 286
  • Last Modified:

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

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
Sathish David  Kumar N
Asked:
Sathish David  Kumar N
  • 5
  • 4
  • 2
  • +1
1 Solution
 
Samuel LiewCommented:
You might want to check if there are multiple elements with same ID.
0
 
Sathish David Kumar NArchitectAuthor Commented:
That only one div c2 and c3 id is not assign for any div tag ...
in java script junction only i assign
0
 
Samuel LiewCommented:
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
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
leakim971PluritechnicianCommented:
Try :

document.getElementById("c2").setAttribute("id", 'c3');
document.getElementById("buyLV3").setAttribute("id", 'buyLV2');
0
 
Sathish David Kumar NArchitectAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
Sathish David Kumar NArchitectAuthor Commented:
>>> 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
 
leakim971PluritechnicianCommented:
I did. Whats your browser and its version ?
0
 
blueghoztCommented:
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
 
Sathish David Kumar NArchitectAuthor Commented:
@ leakim971: IE6
@blueghozt: How to use  iterative method ?
0
 
Sathish David Kumar NArchitectAuthor Commented:
Any update ??
0
 
blueghoztCommented:
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
 
leakim971PluritechnicianCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

  • 5
  • 4
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now