Referencing OPTION in javascript

Question

Referencing OPTION in javascript

Navigation

#1 by (1 votes)

1

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

ICMS calculation

<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>

html select option

asked by anonymous 10.11.2018 / 21:41

1 answer

Error calling add on a HashSet Menu that opens when clicking

score 1 · Answer 1

The comparison operator is two == and not one. Only a = is an assignment sign (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 are getting the id of the select and not the option.

You do not need to nest the if 's in this way, use else if . Create a uf variable to select the select element and the estado variable with the id of the selected option.

Another problem is also that you gave the name of the form with the same function name ( calculo ). With this, the calculo object will be the form and not the function, which will return in error when you call the calculo() function in onclick. You have to change one thing or another 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>