i need a fast help with JavaScript

Discussion in 'JavaScript' started by redhits, Feb 26, 2008.

0
  1. #1
    I have 5 invisible divs

    <div class=file1></div>
    <div class=file2></div>
    <div class=file3></div>
    <div class=file4></div>
    <div class=file5></div>

    in this format, and i want that each time somebody click on "Upload another file" the script to make the next div visible.
     
    redhits, Feb 26, 2008 IP
  2. rkquest

    rkquest Well-Known Member

    Messages:
    828
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    140
    #2
    Hi there,

    It will be far easier if you use "id" instead of class. Try this script.

    
<html>

<head>
<style>
	#file1 { display: none; }
	#file2 { display: none; }
	#file3 { display: none; }
	#file4 { display: none; }
	#file5 { display: none; }
</style>
<script type="text/javascript">
var showing = 1;
function showNext() {
	if (showing<5) {
		document.getElementById('file'+showing).style.display='block';
		showing++;
	} else {
		alert("No more!!!");
	}
}
</script>
</head>

<body>

<div id="file1"><input name="file1" type="file" /></div>
<div id="file2"><input name="file2" type="file" /></div>
<div id="file3"><input name="file3" type="file" /></div>
<div id="file4"><input name="file4" type="file" /></div>
<div id="file5"><input name="file5" type="file" /></div>

<input type="button" value="Upload another file" onclick="showNext();" />

</body>

</html>
    HTML:
     
    rkquest, Feb 27, 2008 IP