I am trying to have 2 selection boxes, 1 for print type, and 1 for size. For example I want when someone clicks the "LUSTRE" option in the first selection to have the other selection box only display "17x25.5", "13x19", and "10x15" and so on for the different print types. The problem I'm having is that when my code that matches the two outputs lets say "LUSTRE" & "10X15" to display a price of "$100". This works fine BUT, when you have already selected from both boxes THEN change one of the selections the price doesn't remove when lets say the boxes are now "SATIN" & "SELECT SIZE" then the price is still $100 and when added to cart it takes "SATIN", "SELECT SIZE" & "$100". Is there a way to remove the price when the boxes are changed after a price has been set already?
below is code for all sections that I currently have shortened to eliminate repetitive code, This is quite long but all these sections are essential to add to show what I'm trying to accomplish
//html for the question
<div class="shop-item">
<span class="shop-item-title">19</span>
<img id="cars1" class="shop-item-image shop-item-image1" src="../IMG/ESPSTORE41.jpg">
<span class="shop-item-src1">../IMG/ESPSTORE41.jpg</span>
<div class="shop-item-details">
<select name="menu1" id="print-type1">
<option id="print-type-button1" value="24x36,20x30,17x25.5,16x24,13x19,12x18,10x15">SELECT PRINT TYPE</option>
<option id="satin-button1" value="24x36,20x30,16x24,12x18">SATIN</option>
<option id="lustre-button1" value="17x25.5,13x19,10x15">LUSTRE</option>
<option id="canvas-button1" value="24x36">CANVAS</option>
<option id="aluminum-button1" value="24x36,20x30">ALUMINUM PHOTO PANEL</option>
</select>
<select name="menu2" id="size-type1">
<option id="size-button1" value="">SELECT SIZE</option>
<option id="24x36-button1" value="24x36">24x36</option>
<option id="20x30-button1" value="20x30">20x30</option>
<option id="17x25.5-button1" value="17x25.5">17x25.5</option>
<option id="16x24-button1" value="16x24">16x24</option>
<option id="13x19-button1" value="13x19">13x19</option>
<option id="12x18-button1" value="12x18">12x18</option>
<option id="10x15-button1" value="10x15">10x15</option>
</select>
<span id="shop-item-price1" class="shop-item-price shop-item-price1"></span>
<button id="shop-item-button1" class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
</div>
</div>
//checking print to size to display price
var typeElement1 = document.getElementById('print-type1')
var checkTypeText1 = typeElement1.options[typeElement1.selectedIndex].text
typeElement1.addEventListener("change", (e) => {
var typeText1 = typeElement1.options[typeElement1.selectedIndex].text
var sizeElement1 = document.getElementById('size-type1')
var checkSizeText1 = sizeElement1.options[sizeElement1.selectedIndex].text
sizeElement1.addEventListener("change", (e) => {
var sizeText1 = sizeElement1.options[sizeElement1.selectedIndex].text
if(sizeText1 == 'SELECT SIZE') {
document.getElementById('shop-item-price1').innerText = ''
}
if(typeText1 == 'SATIN' && sizeText1 == '24x36') {
document.getElementById('shop-item-price1').innerText = '$200'
}
else if(typeText1 == 'SATIN' && sizeText1 == '20x30') {
document.getElementById('shop-item-price1').innerText = '$170'
}
else if(typeText1 == 'SATIN' && sizeText1 == '16x24') {
document.getElementById('shop-item-price1').innerText = '$150'
}
})})
////checking size to print to display price
var sizeElement1 = document.getElementById('size-type1')
var checkSizeText1 = sizeElement1.options[sizeElement1.selectedIndex].text
sizeElement1.addEventListener("change", (e) => {
var sizeText1 = sizeElement1.options[sizeElement1.selectedIndex].text
var typeElement1 = document.getElementById('print-type1')
var checkTypeText1 = typeElement1.options[typeElement1.selectedIndex].text
typeElement1.addEventListener("change", (e) => {
var typeText1 = typeElement1.options[typeElement1.selectedIndex].text
if(typeText1 == 'SELECT PRINT TYPE') {
document.getElementById('shop-item-price1').innerText = ''
}
if(typeText1 == 'SATIN' && sizeText1 == '24x36') {
document.getElementById('shop-item-price1').innerText = '$200'
}
else if(typeText1 == 'SATIN' && sizeText1 == '20x30') {
document.getElementById('shop-item-price1').innerText = '$170'
}
else if(typeText1 == 'SATIN' && sizeText1 == '16x24') {
document.getElementById('shop-item-price1').innerText = '$150'
}
})})
//selecting which display options to show or hide
const sizeType1 = document.getElementById("size-type1");
const sizeType1Options = [...sizeType1.children];
document.querySelector("#print-type1").addEventListener("change", (e) => {
sizeType1.innerHTML = sizeType1Options
.filter((o) => e.target.value.includes(o.value))
.map((o) => o.outerHTML)
.join("");
});
//grabbing selected info from boxes to move to cart page
function addToCartClicked(event) {
var button = event.target
var shopItem = button.parentElement.parentElement
var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src
if(price == '') {
alert('Please select Size and Type')
return;
}
if (title == "19") {
addItemToCart1()
}
else if (title == "20") {
addItemToCart2()
}
}
//adding info to localStorage
function addItemToCart1() {
var cartRowSrc1 = `${document.getElementsByClassName('shop-item-src1')[0].innerText}`
var cartRowPrice1 = `${document.getElementsByClassName('shop-item-price1')[0].innerText}`
localStorage.setItem("naturesrc1", cartRowSrc1)
localStorage.setItem("natureprice1", cartRowPrice1)
var typeElement1 = document.getElementById('print-type1')
var checkTypeText1 = typeElement1.options[typeElement1.selectedIndex].text
var typeText1 = typeElement1.options[typeElement1.selectedIndex].text
var sizeElement1 = document.getElementById('size-type1')
var checkSizeText1 = sizeElement1.options[sizeElement1.selectedIndex].text
var sizeText1 = sizeElement1.options[sizeElement1.selectedIndex].text
var cartRowTitle1 = typeText1 + sizeText1
localStorage.setItem("naturetitle1", cartRowTitle1)
alert("Added To Cart")
}