I cannot make the Purchase Value appear in the given field

Question

I need to create a script that makes the total purchase amount split and the split value appear in the Total Value field. I can’t identify what’s missing in my code

<form>
    Valor da Compra <br>
    <input type="text" id="valorCompra"><br>

    Parcelas <br>
    <select id="parcelas">
        <option value="#">1x</option>
        <option value="#">2x</option>
        <option value="#">3x</option>
        <option value="#">4x</option>
    </select><br>

    Valor Total <br>
    <input type="text" id="valorTotal" readonly><br>
    <button type="button" id="btn">Calcular</button>
</form>

<script>
    var $valorCompra = document.getElementById('valorCompra');
    var $valorTotal = document.getElementById('valorTotal');
    var $parcelas = document.querySelectorAll('option');
    var $btn = document.getElementById('btn');

    var $vlrCompra = parseFloat($valorCompra.value);
    var $parcel = parseFloat($parcelas.value);

    var $msg = '';
    var $valorFinal = 0;

    function btn(){
    $btn.addEventListener('click', function(){
        calcular();
    })
}
btn();

    function calcular() {
        if ($parcelas == 1) {
            $valorFinal = $valorCompra;
            $msg = 'O valor da compra é: ' + $valorFinal;
        } else if ($parcelas == 2) {
            $valorFinal = $valorCompra + ($valorCompra * 0.03);
            $msg = 'O valor da compra é: ' + $valorCompra + ' em 2x de: ' + $valorFinal / 2;
        } else if ($parcelas == 3) {
            $valorFinal = $valorCompra + ($valorCompra * 0.05);
            $msg = 'O valor da compra é: ' + $valorCompra + ' em 3x de: ' + $valorFinal / 3;
        } else {
            $valorFinal = $valorCompra + ($valorCompra * 0.07);
            $msg = 'O valor da compra é: ' + $valorCompra + ' em 4x de: ' + $valorFinal / 4;
        }
    }

Answer 1

I made some adjustments, try it this way:

<form>
        Valor da Compra <br>
        <input type="text" id="valorCompra"><br>

        Parcelas <br>
        <select id="parcelas">
            <option value="1">1x</option>
            <option value="2">2x</option>
            <option value="3">3x</option>
            <option value="4">4x</option>
        </select><br>

        Valor Total <br>
        <input type="text" id="valorTotal" readonly><br>
        <button type="button" id="btn">Calcular</button>
    </form>

    <script>
        
        var $btn = document.getElementById('btn');

        function btn(){
        $btn.addEventListener('click', function(){
            calcular();
        })
    }
    btn();

        function calcular() {
            var $valorCompra = document.getElementById('valorCompra');
            var $parcelas = document.getElementById('parcelas');

            $valorCompra = parseFloat($valorCompra.value);
            $parcelas = parseFloat($parcelas.value);

            var $msg = '';
            var $valorFinal = 0;
        
            if ($parcelas == 1) {
                $valorFinal = $valorCompra;
                $msg = 'O valor da compra é: ' + $valorFinal;
            } else if ($parcelas == 2) {
                $valorFinal = ($valorCompra + ($valorCompra * 0.03)) / 2;
                $msg = 'O valor da compra é: ' + $valorCompra + ' em 2x de: ' + $valorFinal;
            } else if ($parcelas == 3) {
                $valorFinal = ($valorCompra + ($valorCompra * 0.05)) / 3;
                $msg = 'O valor da compra é: ' + $valorCompra + ' em 3x de: ' + $valorFinal;
            } else {
                $valorFinal = ($valorCompra + ($valorCompra * 0.07)) / 3;
                $msg = 'O valor da compra é: ' + $valorCompra + ' em 4x de: ' + $valorFinal;
            }
            
            document.getElementById('valorTotal').value = $valorFinal;
        }
</script>