I posted this query about a year ago, but I did not have a fiddle prepared at that time and my question was not as well articulated as it could have been. Despite that, many people came forward to offer their help, and I am truly grateful for that. This time around, I have created a fiddle with the hope of providing you all with a better understanding of what I need assistance with. Here is the link to the fiddle
If necessary, here is the full page - Visit the full page here - all the code can be found on the page itself.
My aim is to create a mock car selector page to enhance my knowledge of JavaScript. I want users to be able to choose a car color first, followed by a wheel style. The selected car color should remain constant while cycling through different wheel styles, and vice versa. Users should also be given the option to select a wheel style and then cycle through the available colors while keeping the chosen wheel design intact, or opt for a paint color and navigate through the various wheels.
Currently, there are options to select from five different wheel types or sixteen distinct colors, but these choices are independent of each other. I am struggling to come up with the JavaScript logic required to tie them together.
I have images for all 16 unique paint colors with each of the 5 wheel styles, totaling to 80 pictures in total.
Some of the approaches I've considered/tried include...
- Creating an array containing all 80 image paths and calling the appropriate one when needed
- Adding 80 image tags in the HTML to introduce them into the DOM, setting the image class to display: none; and later changing it to display: block; onClick
Due to my lack of experience, I am struggling to develop the required logic and feel stuck at the moment. Below is a glimpse of the current JavaScript logic I am utilizing.
... (JavaScript functions go here)