The prelude is that I’m trying to learn JS on my own (books, YouTube, Udemy, etc.) and have created a test problem for myself that I cannot figure out how to solve.
In the project, I’m attempting:
- Multiple events for many elements
- Tabs (which work fine - I think)
- Efficient code (vanilla JS, DRY)
Here’s a working CodePen (minus the tabs) for one aspect. The window opens with three buttons:
Control: displays an image
Show: shows an image for 2 seconds
Stay: shows the same image until you click another button
I’m trying to ramp this up as follows:
- Four versions of the above CodePen code with each version in it’s own tab on the same page.
- Each version uses the same three buttons, but within its own tab
- Each version uses a different set of three images and their displaying properties
My failing attempt at that is in this Pen.
There, I’ve loaded the images into an Array of Objects. But then I got lost as to how to run the tabbed content image display using a single set of functions for all tabs. So I tried coding each separately, but that failed as well.
I’m assuming I’m missing a whole lot here as my understanding of loops, arrays, objects, etc. is limited (though growing). I think I can use a single loop to control populating the content area for each tab, but am now quite lost.
Can anyone push me in the correct direction?