How to assign a value after a selection in Section - JAVASCRIPT

Question

i would like to know how to assign values to the selects of my code, for example if person select "from R$ 25,000/month to R$ 50,000/month" a value is generated in the Javascript code equivalent to 50, because I want to take this value to make a calculation at the end.

An example of something similar to what I want to do is shown in GIF, where varying the value of <input> the total value is also changed.

My code is currently this:

HTML

var faturamento_anual = document.getElementById('faturamento')
     var faturamento_selecionado = ""
     if (faturamento_anual[1].checked) {
        faturamento_selecionado = '50'
     } else if (faturamento_anual[2].checked) {
      faturamento_selecionado = '150'
     }

<select name="faturamento" id="faturamento">    
                        <option value="cinco_mil"><li>Até R$ 5.000/mês</li></option>
                        <option value="dez_mil">de R$ 5.000/mês até R$ 10.000/mês</option>
                        <option value="vinte_mil">de R$ 10.000/mês até R$ 25.000/mês</option>
                        <option value="cinquenta_mil">de R$ 25.000/mês até R$ 50.000/mês</option>
                        <option value="cem_mil">de R$ 50.000/mês até R$ 100.000/mês</option>
                        <option value="mill_mil">mais de R$ 100.000/mês</option>
                </select>

And in Javascript I tried but gave error in every calculation system.

Answer 1

Hello,

You need to listen to the change event in the select value.

Try something like this in javascript:

document.getElementById("faturamento").addEventListener('change', function(){

    let valores = new Array();
    valores['cinco_mil'] = 5;
    valores['dez_mil'] = 10;
    valores['vinte_mil'] = 20;
    valores['cinquenta_mil'] = 50;
    valores['cem_mil'] = 100;
    valores['mill_mil'] = 1000;
    let valorSelecionado = this.value;
    alert(valores[valorSelecionado]);
})

Remember that you can directly put numeric values in HTML:

...
<option value="5">Até R$ 5.000/mês</option>
...

And use more easily in Javascript:

document.getElementById("faturamento").addEventListener('change', function(){
    alert(this.value);
})