Create new element according to number of clicks on a button

Question

**

Short question:How do I programme the html button to show the details af a particular image according to the number of clicks ie if the button is clicked once:show image 1;twice :show image 2 etc;

**

Long explanation of question:

So I want to create a html /php/javascript form.Not just the basic html raw form.No, I want it to be able to allow users upload multiple files at once.I want the layout to be that each time a user presses the upload button,a new file can be uploaded with the thumbnail shown ie a rectangle like box surrounding the details of the uploaded file such as : upload form

I've tried using javascript to create a new element to contain details of the uploading file including the thumbnail when an upload button is clicked but I have a question:

How do I programme the html button to show the details af a particular image according to the number of clicks ie if the button is clicked once:show image 1;twice :show image 2 etc

Answer 1

If you have the same name in the images as the correspondent clicks number, it would be as easy as this:

<button onclick="this.children[0].setAttribute('src', (Number(this.children[0].getAttribute('src').split('.')[0])+1) + '.jpg')">
 <img src="0.jpg"></img>
</button>

Of course, it's cleaner to have the js code in a function, instead there.

If your images names do not match with the numbers, you can use an associative array or object to get the correct name for each position.