JavaScript showChange () для динамического изменения значения в шаблоне django, похоже, не имеет никакого эффекта. Что я делаю неправильно?

Question

У меня есть шаблон Django, где я отображаю продукты из базы данных вместе с раскрывающимся меню, содержащим различные условия для продукта. У меня есть статическая цена за элемент, которую я хотел бы изменить в зависимости от выбранного в данный момент условия без загрузки страницы. Выпадающее меню было создано с помощью форм Django. Я ожидаю, что, когда я выберу условие из меню, цена изменится на значение того варианта, который я выберу, но ничего не происходит. Что я делаю не так?

Джанго сгенерированная форма

<select name="condition" id="id_condition">
<option value="NM / LP">Near Mint / Lightly Played</option>

<option value="MP">Moderately Played</option>

<option value="HP">Heavily Played</option>

<option value="Damaged">Damaged</option>

<option value="Unopened">Unopened</option>

Скрипт внизу моего шаблона

<script>
  function showChange(){
  var selected_material = document.getElementById("id_condition").value;
  document.getElementById("price_id").innerText =  selected_material;
  }
</script>

шаблон

        {% for product, card_price in products %}
    <div style="margin-bottom: 3%;" class="col-sm-3">

        <div class=col-sm-12>
          <form action="{% url 'add_to_cart' product.id %}" method="post" target="submit-frame">{% csrf_token %}
            <div style="" class="row" id=""> 
              <img class="img-responsive center-block" src="https://someImage.jpg">
            </div>

            <div style="" class="row" id=""> 
            <center>
              {{form|crispy}}
              <input id='card_price' type="hidden" name="card_price" min={{card_price}} max={{card_price}} value={{card_price}}>

              <div class="col-sm-3"></div>

              <div class="col-sm-2">             
                <b style="">&nbsp;$<span id="price_id">{{card_price|floatformat:2}}</span></b>
              </div>


              <div class="col-sm-2">
              <input style="color: black;" size="2" id='qtyBox' type="number" name="quantity" min="1" max="8">
              </div>

              <div class="col-sm-1">
              <button style="margin-top: -5%; margin-left: -5%;" class="btn btn-success" data-toggle="popover" data-animation="true"  data-content="Added to cart"  type="submit" id='button'>+</button>
              </div>

              <div class="col-sm-4"></div>

            </center>
          </div>
          </form>
        </div>

    </div>



      {% endfor %}
      {% endif %}




{% endblock %}