如何让一个选择选项影响另一个选择框可能的答案和价格？

Question

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")
}

Answer 1

You need to add an Else condition to your change event listeners that will handle clearing the text if none of the previous conditions are met. For example:

  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'
  }
  else {
    // if no type and price matches are found, reset our price text
    document.getElementById('shop-item-price1').innerText = ''
  }

It looks like you tried to do that with if sizeText1 === 'SELECT SIZE', but if nothing is selected I don't believe it has a text value?