0

**

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

Chad Moore
  • 734
  • 4
  • 15
  • Possible duplicate of [how to differentiate single click event and double click event?](https://stackoverflow.com/questions/5497073/how-to-differentiate-single-click-event-and-double-click-event) – Anthony Jul 10 '18 at 15:12
  • 2
    That's not a standard UI mechanism and your audience will not know that clicking a button multiple times will show a file that's been previously uploaded. If you upload 10 files then how will you remember what was the 7th file? or that you even uploaded 10 files? How will you see the first item as a single click? You should consider using standard behaviour or appending to another container each file uploaded. Have a look at https://pqina.nl/filepond/ for inspiration. – R. Chappell Jul 10 '18 at 15:23
  • No.You don't get it.I want to allow users to upload files.Each time they click the upload buttonand upload a file A new div will appear showing the uploaded file's thumbnail and other info. –  Jul 10 '18 at 15:37

1 Answers1

0

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.

zelda11
  • 425
  • 2
  • 7
  • What specifically you don't get? The onclick event is reading the current value of the img src, and getting the number part, to update incresing it in one. – zelda11 Jul 11 '18 at 08:10