通过JavaScript更改样式颜色

Question

当选择某个选项但不起作用时，我一直在尝试更改输入字段的样式颜色。我尝试了OnClick和Onput，但无济于事。我怀疑这个问题在于{{type}}或=='buy'。

function changeColor () {
    var transaction_type = document.getElementById('buysell');
    var option_user_selection = transaction_type.options[ transaction_type.selectedIndex ].text;
    if (option_user_selection == 'Buy') {
        document.getElementById('costb').style.color = '#006400';
    }
    else {
        document.getElementById('costb').style.color = '#DC143C';
    }
}
<div class="transaction_type">
     <p>Transaction Type:</p>
     <select style="font-size:16px" class="form-select" id='buysell' required>
           {% for type in form.transaction_type %}
               <option>{{ type }}</option>
           {% endfor %}
     </select>
</div>
<div>
  <p>Cost Basis ($):</p>
  {{ form.cost_basis }}
</div>

forms.py

transaction_choices = [
    ('BUY', 'Buy'),
    ('SELL', 'Sell'),
]
transaction_type = forms.CharField(
    max_length=4,
    widget=forms.Select(
        choices=transaction_choices,
        attrs={
            'class': 'form-select',
            'name': 'transaction_type',
            'id': 'floatingTransaction',
            'oninput': 'changeColor();'
        })
)

cost_basis = forms.DecimalField(
    min_value = 0,
    widget = forms.NumberInput(attrs={
            'class': 'form-control',
            'name': 'cost_basis',
            'id': 'costb',
        })
)

渲染模板