I have a simple JavaScript code that changes an image when buttons are clicked. I would like to integrate this functionality with a select statement so that the corresponding option is also changed every time a button is clicked.
<img src="https://robinsonswoodcrafts.com/images/StainColors/11_maple_EnglishChestnut.jpg" id="stainImage" alt="">
<p>
<button onclick="document.getElementById('stainImage').src='images/StainColors/1_pine_Goldenoak.jpg'">Golden Oak</button>
<button onclick="document.getElementById('stainImage').src='images/StainColors/1_pine_Natural.jpg'">Natural</button>
<button onclick="document.getElementById('stainImage').src='images/StainColors/1_pine_Earlyamerican.jpg'">Early American</button>
<button onclick="document.getElementById('stainImage').src='images/StainColors/1_pine_RedMahogany.jpg'">Red Mahogany</button>
<button onclick="document.getElementById('stainImage').src='images/StainColors/1_pine_Puritanpine.jpg'">Puritan</button>
</p>
The stain colors displayed in the images correspond with the options in a select element which will be part of an order form using a shopping cart. The select statement looks like this:
<div class="form__item">
<label for="staincolor" class="form__label">Stain Color</label>
<select name="staincolor" id="stainColor">
<option value="">[ No Stain ]</option>
<option id="sc-goldenoak" value="Golden Oak {p+1.50}">
Golden Oak
</option>
<option id="sc-natural" value="Natural {p+1.50}">
Natural
</option>
<option id="sc-earlyamerican" value="Early American {p+1.50}">
Early American
</option>
<option id="sc-redmahogany" value="Red Mahogany {p+1.50}">
Red Mahogany
</option>
<option id="sc-puritanpine" value="Puritan Pine {p+1.50}">
Puritan Pine
</option>
</select>
</div>