Entry
How to use javascript variable in a static HTML
Nov 18th, 2002 02:25
Klaus Bolwin, Mark Filipak, Rotti Sowmindra,
Rotti:
I have a div tag,which stores some HTML code like this
<div id=div1><input name=textBox id=text1></div>
When ever i access the above text as div1.innerHTML i need the id of
the text field to be incremented.
Mark:
Sounds like you are trying to implement a text box stack such that only
one text box is visible at any one time. When the vistor has filled in
the first box, he/she is presented with a second box that overlays the
first box. After filling in the second box, the visitor is presented
with a third box, and so on through all the boxes. Is that it?
Rotti:
I have used it like this
<div id=div1><input name=textBox id="javascript:eval("text"+counter)
></div>
but it doesnot seem to be working.
Many suggest that i can do the same in JavaScript,but i have a
different scenario where i dont want to use javascript,i want to
javascript variable inside div tag and it has to be updated everytime i
access it.
Mark:
Well, the "javascript:..." statement that you have above will not work,
even if it was syntactically correct. More importantly, it *is*
javascript. You write that you "dont want to use javascript", but you
are using javascript. ...Okay, some education:
The "javascript:" notation is a protocol, just like "http:" and "ftp:"
are also protocols. It can only be used where the browser expects a URL.
Thus, "javascript:alert('Hello!');" is equivalent to
"http://www.yahoo.com" except that instead of contacting Yahoo using the
http protocol, the browser launches the javascript interpreter and gives
it "alert('Hello!');" to evaluate. So when you write this:
Click <a href="javascript:alert('Hello!');">here</a> for a greeting.
it works the same as this:
Click <a href="http://www.yahoo.com">here</a> to go to Yahoo.
In both cases, when the browser encounters 'href=', it expects a URL.
But when the browser encounters 'id=' it expects a string, not a URL.
Putting a URL in the place where the browser expects a string doesn't
work because the browser treats it as a string, not a URL.
Rotti:
I hope you got my problem.
Thanks
Rotti Sowmindra
Mark:
I think what you want to do is implement the stack of text boxes I
outlined above. If so, here's how you might do it (but it is still using
javascript, just hidden javascript):
<body onload="document.getElementById('myInput1').focus();">
<div style='position:relative;'>
<div id='myDiv1' style='position:absolute;visibility:visible;'>
This is box 1. Please fill it in:
<input id='myInput1' type='text' value=''
onkeypress="if (event.keyCode==13){
document.getElementById('myDiv1').style.visibility='hidden';
document.getElementById('myDiv2').style.visibility='visible';
document.getElementById('myInput2').focus();}">
</div>
<div id='myDiv2' style='position:absolute;visibility:hidden;'>
This is box 2. Please fill it in:
<input id='myInput2' type='text' value=''
onkeypress="if (event.keyCode==13){
document.getElementById('myDiv2').style.visibility='hidden';
document.getElementById('myDiv3').style.visibility='visible';
document.getElementById('myInput3').focus();}">
</div>
<div id='myDiv3' style='position:absolute;visibility:hidden;'>
This is box 3. Please fill it in:
<input id='myInput3' type='text' value=''
onkeypress="if (event.keyCode==13){
document.getElementById('myDiv3').style.visibility='hidden';
document.getElementById('myDiv4').style.visibility='visible';
alert('Your box entries were:\n\
'+document.getElementById('myInput1').value+'\n\
'+document.getElementById('myInput2').value+'\n\
'+document.getElementById('myInput3').value);}">
</div>
<div id='myDiv4' style='position:absolute;visibility:hidden;'>
Thank you.
</div>
</div>
Klaus:
the following code increments the id of the input-element and shows the
id as content of the text-field. It works in MSIE and Mozilla:
<html>
<head>
<title></title>
</head>
<body onload="newid = 1;">
<div id="div1">
<input id="text1" onclick="newid+=1; this.id = 'text'+newid;
this.value=this.id;">
</div>
</body>
</html>
