Изменение цвета стиля с помощью JavaScript не работает

Я пытался изменить цвет стиля поля ввода при выборе определенной опции, но ничего не получается. Я пробовал и onclick, и oninput, но безрезультатно. Я подозреваю, что проблема кроется в {{ 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>

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',
        })
)

Вернуться на верх