How do I make a selection based on a previous selection?

Question

For a learning excercise, I'm building a car builder page and want to select car color, then wheel style, with the picture of the car changing to reflect each unique color/wheel combination. There are 16 colors and 5 wheel styles, and I have a picture that represents each unique value.

I was able to work out the first steps to select the car color and the wheel option separately of each other. For example if I click the red car color, I want the color to stay while I cycle through the wheel options. Currently, it defaults back to black, then cycles through the wheels for the black color only.

I'm failing to understand the general logic that should be used to approach a simple two-option combination like this, and things I try like capturing the selected option with a variable to carry it over to the wheel selection breaks the functionality. Can anyone point me in the proper general direction?

Here is the page in its current state - https://www.sanjosecoder.com/porsche/index.html

I know why the code isn't working - but I don't know how to start laying out to factor the two selections together.

Any guidance would be greatly appreaciated!

Button code:
<ul id="example4" class="accordion">
<li class="active">
<h3 class="accord">Exterior Colors</h3>
<div class="panel loading">
<h5 class="option-subhead">Standard Colors</h5>  
<input id="exterior-swatch1" type="button" value=" " onclick="color1()" class="swatch" /> 
<input id="exterior-swatch2" type="button" value=" " onclick="color2()" class="swatch" />   
<input id="exterior-swatch3" type="button" value=" " onclick="color3()" class="swatch" />    
<input id="exterior-swatch4" type="button" value=" " onclick="color4()" class="swatch" />   
<h5 class="option-subhead">Metallic Colors</h5>
<input id="exterior-swatch5" type="button" value=" " onclick="color5()" class="swatch" />    
<input id="exterior-swatch6" type="button" value=" " onclick="color6()" class="swatch" />   
<input id="exterior-swatch7" type="button" value=" " onclick="color7()" class="swatch" />    
<input id="exterior-swatch8" type="button" value=" " onclick="color8()" class="swatch" /><br>
<input id="exterior-swatch9" type="button" value=" " onclick="color9()" class="swatch" />    
<input id="exterior-swatch10" type="button" value=" " onclick="color10()" class="swatch" />   
<input id="exterior-swatch11" type="button" value=" " onclick="color11()" class="swatch" />    
<input id="exterior-swatch12" type="button" value=" " onclick="color12()" class="swatch" />  
<h5 class="option-subhead">Special Colors</h5>
<input id="exterior-swatch13" type="button" value=" " onclick="color13()" class="swatch" />    
<input id="exterior-swatch14" type="button" value=" " onclick="color14()" class="swatch" />   
<input id="exterior-swatch15" type="button" value=" " onclick="color15()" class="swatch" />    
<input id="exterior-swatch16" type="button" value=" " onclick="color16()" class="swatch" />
</div>
</li>

<li>
<h3 class="accord">Wheel Options</h3>   
<div class="panel loading">
<img src="images/carerra-s/wheels/wheel1.png" alt="Wheel Option 1" id="wheel1" class="wheels" onclick="wheeloption1()" />
<img src="images/carerra-s/wheels/wheel2.png" alt="Wheel Option 2" id="wheel2" class="wheels" onclick="wheeloption2()" />
<img src="images/carerra-s/wheels/wheel3.png" alt="Wheel Option 3" id="wheel3" class="wheels" onclick="wheeloption3()" />
<img src="images/carerra-s/wheels/wheel4.png" alt="Wheel Option 4" id="wheel4" class="wheels" onclick="wheeloption4()" />
<img src="images/carerra-s/wheels/wheel5.png" alt="Wheel Option 5" id="wheel5" class="wheels" onclick="wheeloption5()" />
</div>
</li>
</ul>



3 Examples of a total of 16 for all the colors...

<script>
function color1() {
document.getElementById("carerra").src = 'images/carerra-s/exterior/View3-Color1.png';
document.getElementById("exterior-swatch1").style = 'background-image: url("images/swatches/exterior/exterior-color1-checked.png");';
document.getElementById("exterior-swatch2").style = 'background-image: url("images/swatches/exterior/exterior-color2.png");';
document.getElementById("exterior-swatch3").style = 'background-image: url("images/swatches/exterior/exterior-color3.png");';
document.getElementById("exterior-swatch4").style = 'background-image: url("images/swatches/exterior/exterior-color4.png");';
document.getElementById("exterior-swatch5").style = 'background-image: url("images/swatches/exterior/exterior-color5.png");';
document.getElementById("exterior-swatch6").style = 'background-image: url("images/swatches/exterior/exterior-color6.png");';
document.getElementById("exterior-swatch7").style = 'background-image: url("images/swatches/exterior/exterior-color7.png");';
document.getElementById("exterior-swatch8").style = 'background-image: url("images/swatches/exterior/exterior-color8.png");';
document.getElementById("exterior-swatch9").style = 'background-image: url("images/swatches/exterior/exterior-color9.png");';
document.getElementById("exterior-swatch10").style = 'background-image: url("images/swatches/exterior/exterior-color10.png");';
document.getElementById("exterior-swatch11").style = 'background-image: url("images/swatches/exterior/exterior-color11.png");';
document.getElementById("exterior-swatch12").style = 'background-image: url("images/swatches/exterior/exterior-color12.png");';
document.getElementById("exterior-swatch13").style = 'background-image: url("images/swatches/exterior/exterior-color13.png");';
document.getElementById("exterior-swatch14").style = 'background-image: url("images/swatches/exterior/exterior-color14.png");';
document.getElementById("exterior-swatch15").style = 'background-image: url("images/swatches/exterior/exterior-color15.png");';
document.getElementById("exterior-swatch16").style = 'background-image: url("images/swatches/exterior/exterior-color16.png");';
var colorPath = 'images/carerra-s/wheels/color1';
}

<!-- - - - - - - - - - - - - - - - - - CAR COLOR 2 - WHITE - - - - - - - - - - - - - - - - - -->
function color2() {
document.getElementById("carerra").src = 'images/carerra-s/exterior/View3-Color2.png';
document.getElementById("exterior-swatch2").style = 'background-image: url("images/swatches/exterior/exterior-color2-checked.png");';
document.getElementById("exterior-swatch1").style = 'background-image: url("images/swatches/exterior/exterior-color1.png");';
document.getElementById("exterior-swatch3").style = 'background-image: url("images/swatches/exterior/exterior-color3.png");';
document.getElementById("exterior-swatch4").style = 'background-image: url("images/swatches/exterior/exterior-color4.png");';
document.getElementById("exterior-swatch5").style = 'background-image: url("images/swatches/exterior/exterior-color5.png");';
document.getElementById("exterior-swatch6").style = 'background-image: url("images/swatches/exterior/exterior-color6.png");';
document.getElementById("exterior-swatch7").style = 'background-image: url("images/swatches/exterior/exterior-color7.png");';
document.getElementById("exterior-swatch8").style = 'background-image: url("images/swatches/exterior/exterior-color8.png");';
document.getElementById("exterior-swatch9").style = 'background-image: url("images/swatches/exterior/exterior-color9.png");';
document.getElementById("exterior-swatch10").style = 'background-image: url("images/swatches/exterior/exterior-color10.png");';
document.getElementById("exterior-swatch11").style = 'background-image: url("images/swatches/exterior/exterior-color11.png");';
document.getElementById("exterior-swatch12").style = 'background-image: url("images/swatches/exterior/exterior-color12.png");';
document.getElementById("exterior-swatch13").style = 'background-image: url("images/swatches/exterior/exterior-color13.png");';
document.getElementById("exterior-swatch14").style = 'background-image: url("images/swatches/exterior/exterior-color14.png");';
document.getElementById("exterior-swatch15").style = 'background-image: url("images/swatches/exterior/exterior-color15.png");';
document.getElementById("exterior-swatch16").style = 'background-image: url("images/swatches/exterior/exterior-color16.png");';  
var colorPath = "images/carerra-s/wheels/color2";
}
<!-- - - - - - - - - - - - - - - - - - CAR COLOR 3 - YELLOW - - - - - - - - - - - - - - - - - -->
function color3() {
document.getElementById("carerra").src = 'images/carerra-s/exterior/View3-Color3.png';
document.getElementById("exterior-swatch3").style = 'background-image: url("images/swatches/exterior/exterior-color3-checked.png");';
document.getElementById("exterior-swatch1").style = 'background-image: url("images/swatches/exterior/exterior-color1.png");';
document.getElementById("exterior-swatch2").style = 'background-image: url("images/swatches/exterior/exterior-color2.png");';
document.getElementById("exterior-swatch4").style = 'background-image: url("images/swatches/exterior/exterior-color4.png");';
document.getElementById("exterior-swatch5").style = 'background-image: url("images/swatches/exterior/exterior-color5.png");';
document.getElementById("exterior-swatch6").style = 'background-image: url("images/swatches/exterior/exterior-color6.png");';
document.getElementById("exterior-swatch7").style = 'background-image: url("images/swatches/exterior/exterior-color7.png");';
document.getElementById("exterior-swatch8").style = 'background-image: url("images/swatches/exterior/exterior-color8.png");';
document.getElementById("exterior-swatch9").style = 'background-image: url("images/swatches/exterior/exterior-color9.png");';
document.getElementById("exterior-swatch10").style = 'background-image: url("images/swatches/exterior/exterior-color10.png");';
document.getElementById("exterior-swatch11").style = 'background-image: url("images/swatches/exterior/exterior-color11.png");';
document.getElementById("exterior-swatch12").style = 'background-image: url("images/swatches/exterior/exterior-color12.png");';
document.getElementById("exterior-swatch13").style = 'background-image: url("images/swatches/exterior/exterior-color13.png");';
document.getElementById("exterior-swatch14").style = 'background-image: url("images/swatches/exterior/exterior-color14.png");';
document.getElementById("exterior-swatch15").style = 'background-image: url("images/swatches/exterior/exterior-color15.png");';
document.getElementById("exterior-swatch16").style = 'background-image: url("images/swatches/exterior/exterior-color16.png");';
var colorPath = "images/carerra-s/wheels/color3";
}

  <!-- - - - - - - -  WHEEL SCRIPTS STUFF - - - - - - -->

function wheeloption1() 

{document.getElementById("carerra").src = 'images/carerra-s/wheels/color1-option1.png'; document.getElementById("wheel1").src = 'images/carerra-s/wheels/wheel1-checked.png'; document.getElementById("wheel2").src = 'images/carerra-s/wheels/wheel2.png'; document.getElementById("wheel3").src = 'images/carerra-s/wheels/wheel3.png'; document.getElementById("wheel4").src = 'images/carerra-s/wheels/wheel4.png'; document.getElementById("wheel5").src = 'images/carerra-s/wheels/wheel5.png';}

function wheeloption2() 

{document.getElementById("carerra").src = 'images/carerra-s/wheels/color1-option2.png'; document.getElementById("wheel2").src = 'images/carerra-s/wheels/wheel2-checked.png'; document.getElementById("wheel1").src = 'images/carerra-s/wheels/wheel1.png'; document.getElementById("wheel3").src = 'images/carerra-s/wheels/wheel3.png'; document.getElementById("wheel4").src = 'images/carerra-s/wheels/wheel4.png'; document.getElementById("wheel5").src = 'images/carerra-s/wheels/wheel5.png';}

function wheeloption3() 

{document.getElementById("carerra").src = 'images/carerra-s/wheels/color1-option3.png'; document.getElementById("wheel3").src = 'images/carerra-s/wheels/wheel3-checked.png'; document.getElementById("wheel1").src = 'images/carerra-s/wheels/wheel1.png'; document.getElementById("wheel2").src = 'images/carerra-s/wheels/wheel2.png'; document.getElementById("wheel4").src = 'images/carerra-s/wheels/wheel4.png'; document.getElementById("wheel5").src = 'images/carerra-s/wheels/wheel5.png';}

function wheeloption4() 

{document.getElementById("carerra").src = 'images/carerra-s/wheels/color1-option4.png'; document.getElementById("wheel4").src = 'images/carerra-s/wheels/wheel4-checked.png'; document.getElementById("wheel1").src = 'images/carerra-s/wheels/wheel1.png'; document.getElementById("wheel2").src = 'images/carerra-s/wheels/wheel2.png'; document.getElementById("wheel3").src = 'images/carerra-s/wheels/wheel3.png'; document.getElementById("wheel5").src = 'images/carerra-s/wheels/wheel5.png';}

function wheeloption5() 

{document.getElementById("carerra").src = 'images/carerra-s/wheels/color1-option5.png'; document.getElementById("wheel5").src = 'images/carerra-s/wheels/wheel5-checked.png'; document.getElementById("wheel1").src = 'images/carerra-s/wheels/wheel1.png'; document.getElementById("wheel2").src = 'images/carerra-s/wheels/wheel2.png'; document.getElementById("wheel3").src = 'images/carerra-s/wheels/wheel3.png'; document.getElementById("wheel4").src = 'images/carerra-s/wheels/wheel4.png';}

Answer 1

It's hard to say without seeing your code, but it seems like you are changing everything in one function rather than setting the value of each individual item separately.

For example, it seems like you are using a setStyle() function to set color, wheels, interior, etc. all in one function. What you may want to do is have separate functions setColor(), setWheels(), etc which only do one thing and don't touch the other styles.

EDIT: Here is the issue. In your wheel selection functions, you are changing the entire image of the carerra:

function wheelOption1() {
    document.getElementById("carerra").src = 'images/carerra-s/wheels/color1-option1.png';
.... }

Look in your images/carerra-s/wheels folder, at color1-option1.png. You are setting the source of your #carerra element to be that picture. There's nothing magic with old options getting reset, your logic is explicitly telling your page, "When this function runs, change the image that is displayed to be color1-option1.png, which is an image of a black car."

Unfortunately 'solving the issue' is a lot more complex than answering the question of why does this happen. I would recommend you break your car image into multiple component parts, with a separate image for the car body, the wheels, and the interior. So for example, your car body images would simply have the wheels and interior edited out, and your wheels and interior would ONLY show the wheels and interior. From there you could have a <div> for your car, and four separate images in that div that contain the images for the body, the front wheel, the rear wheel, and the interior. From there, relatively position all the separate images so they are overlaying each other correctly. And then your functions can solely change the source image for the images you want to change, and nothing else will need to be reset.