variable increment problem
This is my code:
[CODE=html]<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitl ed Document</title>
<style type="text/css" id="mainStyle" >
#floatingDiv {
position:absolu te;
border:#000000 solid 1px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin-top:0;
padding-top:0;
}
#floatingDiv ul li:hover {
background-color:#333333;
color:#CCCCCC;
cursor:pointer;
}
#floatingDiv ul {
padding:0;
margin:0;
list-style:none;
}
</style>
<script type="text/javascript">
function changeText(valu e) {
document.mainFo rm.textBox.valu e = value;
}
var li_n = 0;
function populateList(){
objList = document.getEle mentById('float ingDivUL');
objListElement = document.create Element('li');
objTextNode = document.create TextNode('Test Element'+li_n+' ');
if(navigator.ap pName != "Microsoft Internet Explorer") {
objListElement. setAttribute("o nclick","change Text('Test Element"+li_n+" ')");
} else {
objListElement. setAttribute("o nclick",functio n(){changeText( 'Test Element'+li_n)} );
}
objListElement. setAttribute("i d","floatingDiv Li"+li_n);
objListElement. appendChild(obj TextNode);
objList.appendC hild(objListEle ment);
CheckEvents();
li_n++;
}
function CheckEmpty() {
if(document.get ElementById('fl oatingDivUL').i nnerHTML == "") {
document.getEle mentById('float ingDiv').style. border = "";
}else{
document.getEle mentById('float ingDiv').style. border = "#000000 solid 1px";
}
}
function CheckEvents() {
CheckEmpty();
}
window.onload = setTimeout("Che ckEvents()",10) ;
</script>
</head>
<body>
<form name="mainForm" >
<input name="textBox" type="text" /><a href="javascrip t:populateList( )">clcik</a><br />
<div id="floatingDiv ">
<ul id="floatingDiv UL">
</ul>
</div>
</form>
</body>
</html>
[/CODE]
My problem is that the changeText() function where it looks like this function(){chan geText('Test Element'+li_n)} does not use the li_n variable where it was initiated but where it is at after incrementation.
[CODE=html]<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitl ed Document</title>
<style type="text/css" id="mainStyle" >
#floatingDiv {
position:absolu te;
border:#000000 solid 1px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin-top:0;
padding-top:0;
}
#floatingDiv ul li:hover {
background-color:#333333;
color:#CCCCCC;
cursor:pointer;
}
#floatingDiv ul {
padding:0;
margin:0;
list-style:none;
}
</style>
<script type="text/javascript">
function changeText(valu e) {
document.mainFo rm.textBox.valu e = value;
}
var li_n = 0;
function populateList(){
objList = document.getEle mentById('float ingDivUL');
objListElement = document.create Element('li');
objTextNode = document.create TextNode('Test Element'+li_n+' ');
if(navigator.ap pName != "Microsoft Internet Explorer") {
objListElement. setAttribute("o nclick","change Text('Test Element"+li_n+" ')");
} else {
objListElement. setAttribute("o nclick",functio n(){changeText( 'Test Element'+li_n)} );
}
objListElement. setAttribute("i d","floatingDiv Li"+li_n);
objListElement. appendChild(obj TextNode);
objList.appendC hild(objListEle ment);
CheckEvents();
li_n++;
}
function CheckEmpty() {
if(document.get ElementById('fl oatingDivUL').i nnerHTML == "") {
document.getEle mentById('float ingDiv').style. border = "";
}else{
document.getEle mentById('float ingDiv').style. border = "#000000 solid 1px";
}
}
function CheckEvents() {
CheckEmpty();
}
window.onload = setTimeout("Che ckEvents()",10) ;
</script>
</head>
<body>
<form name="mainForm" >
<input name="textBox" type="text" /><a href="javascrip t:populateList( )">clcik</a><br />
<div id="floatingDiv ">
<ul id="floatingDiv UL">
</ul>
</div>
</form>
</body>
</html>
[/CODE]
My problem is that the changeText() function where it looks like this function(){chan geText('Test Element'+li_n)} does not use the li_n variable where it was initiated but where it is at after incrementation.
Comment