Referencing OPTION in javascript

Question

Next: I have to enter the name and price and status data, depending on the state it calculates the icms. I wanted to make sure that depending on the OPTION I select it calculated automatically, with the if’s and Else’s. but I don’t know if I’m referencing the option id right for javascript. Can you help me? It’s a little urgent

ICMS

<meta charset="utf-8">

<script type="text/javascript">
    var nome;
    var preco;
    var estado;
    var icms=0;

    function calculo(){
        nome = document.calculo.nome.value;
        preco = parseFloat(document.calculo.preco.value);
        estado = document.getElementById("estado").id;

        if (estado.id="sp") {
            icms = preco * 0.019;
        }else{
            if (estado.id="rj") {
                icms = preco * 0.012;
            }else{
                if (estado.id="sc") {
                    icms = preco * 0.09;
                }else{
                    if (estado.id="se") {
                        icms = preco * 0.08;
                    }else{
                        if (estado.id="mg") {
                            icms = preco * 0.1;
                        }
                    }
                }
            }
        }

        alert('ICMS: ' + icms.toString());

    }
</script>

<form name="calculo">
    <label for="nome" title="Nome do produto">Digite o nome do produto</label>
    <br>
    <input type="text" id="nome">

    <br><br>

    <label for="preco" title="Preço">Digite o preço do produto</label>
    <br>
    <input type="text" id="preco">

    <br><br>

    <label>Estado</label>
    <select id="estado">
        <option id="sp"> SP
        <option id="mg"> MG
        <option id="rj"> RJ
        <option id="sc"> SC
        <option id="se"> SE 
    </select>


    <br><br>

    <input type="button" value="Calcular" onclick="calculo()">
    <input type="reset" value="Limpar">

</form>

Answer 1

The comparison operator is two == and not one. Only one = is an assignment signal (assign a value to something).

To get the attribute of the selected option you can use elemento_select.selectedIndex. When using document.getElementById("estado").id; you’re catching the id select and not option.

You don’t have to cuddle if's this way, use else if. Create one more variable uf to select the element select and the variable estado with the id of the selected option.

Another problem is that you gave the form name with the same function name (calculo). With that the object calculo will be the form and not the function, which will return in error when you call the function calculo() on onclick. You have to change something or other with different names. In the case below I changed the form name to calculos:

var nome;
var preco;
var estado;
var icms=0;
var uf;

function calculo(){
  nome = document.calculos.nome.value;
  preco = parseFloat(document.calculos.preco.value);
  uf = document.getElementById("estado");
  estado = uf.options[uf.selectedIndex].id;

  if (estado=="sp") {
      icms = preco * 0.019;
  }else if(estado=="rj") {
      icms = preco * 0.012;
  }else if (estado="sc") {
      icms = preco * 0.09;
  }else if (estado=="se") {
      icms = preco * 0.08;
  }else if (estado=="mg") {
      icms = preco * 0.1;
  }

  alert('ICMS: ' + icms.toString());

}

<form name="calculos">
    <label for="nome" title="Nome do produto">Digite o nome do produto</label>
    <br>
    <input type="text" id="nome">

    <br><br>

    <label for="preco" title="Preço">Digite o preço do produto</label>
    <br>
    <input type="text" id="preco">

    <br><br>

    <label>Estado</label>
    <select id="estado">
        <option id="sp"> SP</option>
        <option id="mg"> MG</option>
        <option id="rj"> RJ</option>
        <option id="sc"> SC</option>
        <option id="se"> SE </option>
    </select>


    <br><br>

    <input type="button" value="Calcular" onclick="calculo()">
    <input type="reset" value="Limpar">

</form>