How do i write a code in js that adds images specified ids to a another web div when a button under it is tapped?

Question

I want when the button under a picture is tapped,the image whose button is tapped is added to another div using DOM manipulation, however i want this to be under one event delegation,that is i dont want to get each and every button and give it a function to add the image tapped,i want to write a code that gets the button tapped and adds the image whose button is tapped. Help please.

Answer 1

something like this?
(ignore the crazy css filters in the imgBtn code. I went overboard playing with them, but that was my base code)

The second one (thumbDisplay) is perhaps nearer to what you are describing

https://code.sololearn.com/WhoC66mw3gzq/?ref=app
https://code.sololearn.com/W9UCgOk26e43/?ref=app

Answer 2

Still not thoroughly clear. Let me try to break it down ...

There are boxes (div) with <img> and <button> within
When any one of the <button> under the <img> is clicked; a clone of the respective <img> should be created in another <div>

Is this the scenario?

Answer 3

Michael Kamau No need to copy the code. You should link it instead. Easier to do, and helps a lot more than a wall of pasted code.
Edit your question description, tap "+" button, select Code, then choose the code you need help with.

Answer 4

Yeah Bob_Li,thats exactly it,however instead of setting and changing background imgs,i just want to add another img,as a div on its own. With you code i think i can modify it to fit my purpose thank you..

Answer 5

What you refer here by "specified ids"? you mean the 'id' attribute of the <img> or the 'src' attribute?

I didn't clearly understood what you meant by "one event delegation". Can you elaborate further on that part?

Sharing your code bit link may help anyone to better understand what you mean. So attach your tryout code bit link in the post Description above ...

Answer 6

However,Ipang the scenario you just described is the one,

Answer 7

Michael Kamau
Your idea of not using the src url as background made me realize that the div containers were unnecessary.

The divs in imgBtn code were used to hold the emojis

The imgs in thumbDisplay code do not need the divs. They can be used on their own. The only essential div is the group flexbox container for the thumbnails.

I simplified the code I posted.

Answer 8

No i meant id attribute of the button Ipang, i need help writing a code that checks for a click on a button that is below an img,after this, it creates a new element on another div and adds the img whose button has been ckicked.

Answer 9

Im unable to connect the cide bit as i am using my mole phone to ask the question but the code is in my computer,im a bit lazi to copy the code,😢, hopefully you understand my question better Ipang

Answer 10

I can add the imgs in the div,however i have to check the img whose btn has been clicked and when appending it i have to put its id attribute same as the one in the img and since ids are not the same in the imgs,it becomes a little bit stressful to write each and every code fir the rest of the imgs. The imgs are a lot,is there a way to shorten the code in that when a button is pressed,the target attribute is found and then the img added without need of manually adding it myself

Answer 11

Ok Prado and Ipang ,i will insert the code