Problem with Javascript code resetting after including CSS

Asked

Viewed 32 times

-1

I made a script in Java to give the calculation of ST for use and consumption. The calculation is working, but when I add CSS to style the page, when executing the code it appears the answer in thousandths of seconds and already Zera all fields.

What am I doing wrong? Below are the files ST.html and the ST.css.

ST.html

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8">
        <title>ST</title>
        <link rel="stylesheet" href="reset.css">
        <link rel="stylesheet" href="st.css">
    </head>
    <body>
        <form>
            <div class="entradas">
                <label for="tipo">Tipo</label>
                <select id="tipo">
                    <option name="tipo1" value="1">Contribuinte</option>
                    <option name="tipo2" value="2">Não Contribuinte</option>
                </select>

                <label for="origem">Origem</label>
                <select id="origem">    
                    <option name="nacional" value="1">Nacional</option>
                    <option name="importado" value="2">Importado</option>
                </select>

                <label for="estado">Estado <span id="resultadoIcms"></span></label>
                <select id="estado">    
                    <option name="AC" value="1">Acre</option>
                    <option name="AL" value="2">Alagoas</option>
                    <option name="AM" value="3">Amazonas</option>
                    <option name="AP" value="4">Amapá</option>
                    <option name="BA" value="5">Bahia</option>
                    <option name="CE" value="6">Ceara</option>
                    <option name="DF" value="7">Distrito Federal</option>
                    <option name="ES" value="8">Espirito Santo</option>
                    <option name="GO" value="9">Goias</option>
                    <option name="MA" value="10">Maranhão</option>
                    <option name="MG" value="11">Minas Gerais</option>
                    <option name="MS" value="12">Mato Grosso do Sul</option>
                    <option name="MT" value="13">Mato Grosso</option>
                    <option name="PA" value="14">Para</option>
                    <option name="PB" value="15">Paraíba</option>
                    <option name="PE" value="16">Pernambuco</option>
                    <option name="PI" value="17">Piauí</option>
                    <option name="PR" value="18">Paraná</option>
                    <option name="RJ" value="19">Rio de Janeiro</option>
                    <option name="RN" value="20">Rio Grande do Norte</option>
                    <option name="RO" value="21">Rondonia</option>
                    <option name="RR" value="22">Roraima</option>
                    <option name="RS" value="23">Rio Grande do Sul</option>
                    <option name="SC" value="24">Santa Catarina</option>
                    <option name="SE" value="25">Sergipe</option>
                    <option name="TO" value="26">Tocantins</option>
                </select>

                <label for="valorProduto">Valor do Produto</label>
                <input id="valorProduto"/>

                <label for="aliquotaInterna">Aliquota Interna</label>
                <input id="aliquotaInterna" value="18"/>
            </div>

            <button id="botao">Calcular</button>

            <div class="saidas">    
                <label for="resultado1">Valor Total:</label>
                <span id="resultado1"></span>

                <label for="resultado2">Difal:</label>
                <span id="resultado2"></span>
            </div>
        </form>
    </body>
    <script>
        function naoContribuinte(valorProduto, icms, aliquotaInterna) { 
            var diferencial = aliquotaInterna - icms;
            var valor = valorProduto * 1;
            var difal = (valorProduto * (diferencial / 100));
            if (resultado1.textContent === undefined) { //Chrome
                resultado1.textContent = valor.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
                resultado2.textContent = difal.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
                resultadoIcms.textContent = icms + "%";
            } else { //IE
                resultado1.innerText = valor.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
                resultado2.innerText = difal.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
                resultadoIcms.innerText = icms + "%";
            }
        }   

        function direto(valorProduto, icms, aliquotaInterna) {  
            var diferencial = aliquotaInterna - icms;
            var difal = valorProduto * (diferencial / 100);
            var totalNf = parseFloat(valorProduto) + parseFloat(difal);
            if (resultado1.textContent === undefined) { //Chrome
                resultado1.textContent = totalNf.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
                resultado2.textContent = difal.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
                resultadoIcms.textContent = icms + "%";
            } else { //IE
                resultado1.innerText = totalNf.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
                resultado2.innerText = difal.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
                resultadoIcms.innerText = icms + "%";
            }
        }

        function porDentro(valorProduto, icms, aliquotaInterna) {   
            var icmsProduto = valorProduto * (icms / 100);
            var aliqInterPorcent = aliquotaInterna / 100;
            var base = (valorProduto  - icmsProduto) / (1 - aliqInterPorcent);
            var difal = base - valorProduto;
            var totalNf = parseFloat(valorProduto) + parseFloat(difal);
            if (resultado1.textContent === undefined) { //Chrome
                resultado1.textContent = totalNf.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
                resultado2.textContent = difal.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
                resultadoIcms.textContent = icms + "%";
            } else { //IE
                resultado1.innerText = totalNf.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
                resultado2.innerText = difal.toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
                resultadoIcms.innerText = icms + "%";
            }
        }       

        function calcula() {

            if (tipo.value == 2) {
                for (var doz = 0; doz < doze.length; doz++) {
                    if(estado.value == doze[doz]) {
                        if(origem.value == 2) {
                            return naoContribuinte(valor.value, 4, interna.value);
                        } else {
                            return naoContribuinte(valor.value, 12, interna.value);
                        }
                    }
                }
                for (var set = 0; set < sete.length; set++) {
                    if(estado.value == sete[set]) {
                        if(origem.value == 2) {
                            return naoContribuinte(valor.value, 4, interna.value);
                        } else {
                            return naoContribuinte(valor.value, 7, interna.value);
                        }
                    }
                }
            }

            if (tipo.value == 1) {
                for (var diret = 0; diret < cDireto.length; diret++) {
                    if(estado.value == cDireto[diret]) {
                        for (var set = 0; set < sete.length; set++) {
                            if(estado.value == sete[set]) {
                                if(origem.value == 2) {
                                    return direto(valor.value, 4, interna.value);
                                } else {
                                    return direto(valor.value, 7, interna.value);
                                }
                            }
                        }
                        for (var doz = 0; doz < doze.length; doz++) {
                            if(estado.value == doze[doz]) {
                                if(origem.value == 2) {
                                    return direto(valor.value, 4, interna.value);
                                } else {
                                    return direto(valor.value, 12, interna.value);
                                }
                            }
                        }
                    }
                }

                for (var dentro = 0; dentro < cPorDentro.length; dentro++) {
                    if(estado.value == cPorDentro[dentro]) {
                        for (var set = 0; set < sete.length; set++) {
                            if(estado.value == sete[set]) {
                                if(origem.value == 2) {
                                    return porDentro(valor.value, 4, interna.value);
                                } else {
                                    return porDentro(valor.value, 7, interna.value);
                                }
                            }
                        }
                        for (var doz = 0; doz < doze.length; doz++) {
                            if(estado.value == doze[doz]) {
                                if(origem.value == 2) {
                                    return porDentro(valor.value, 4, interna.value);
                                } else {
                                    return porDentro(valor.value, 12, interna.value);
                                }
                            }
                        }
                    }
                }
            }
        }

        var doze = [11, 18, 19, 23, 24];
        var sete = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 13, 14, 15, 16, 17, 20, 21, 22, 25, 26];
        var cDireto = [3, 4, 6, 7, 8, 10, 12, 13, 15, 17, 19, 20, 22];
        var cPorDentro = [1, 2, 5, 9, 11, 14, 16, 18, 21, 23, 24, 25, 26];

        var tipo = document.getElementById("tipo");
        var origem = document.getElementById("origem");
        var estado = document.getElementById("estado"); 
        var valor = document.getElementById("valorProduto");
        var interna = document.getElementById("aliquotaInterna");
        var botao = document.getElementById("botao");
        var resultado1 = document.getElementById("resultado1");
        var resultado2 = document.getElementById("resultado2");
        var resultadoIcms = document.getElementById("resultadoIcms");

        document.addEventListener('keypress', function(usarEnter) {
            if(usarEnter.which == 13) {
                calcula();
            }
        }, false); 

        botao.onclick = calcula;
        tipo.focus();

    </script>   
</html>

ST.css

body {
    margin: 50px 0 0 100px;
}

.entradas {
    display: inline-block;
    border: 2px solid #3366ff;
    border-radius: 10px;
    padding: 5px;
}

.entradas label {
    display: block;
    font-size: 17px;
    font-weight: bold;
    margin: 0 0 0 0;
}

.entradas select {
    display: block;
    margin: 5px 0 15px 0;
}

.entradas input {
    display: block;
    margin: 5px 0 15px 0;
}

button {
    display: block;
    margin: 15px 0 15px 60px; 
}

.saidas {
    display: inline-block;
    padding: 15px;
    font-size: 17px;
    font-weight: bold;
}

.saidas span {
    display: block;
    margin: 15px auto;
}
javascript html css

  • It sends to some other page or the result is on the same page?

  • The result is on the same page. It appears in the result1 span and result2.

  • Just remove the tags <form>.

1 answer

1


The problem is in the button. The button by default is Submit. This is used when the result appears on another page or when sending data by post/get. As in your case the result is on the same page and all logic is in the client and not in the server, you should insert the type="button", so it will not try to send to any other page or api.

Would look like this:

<button type="button" id="botao">Calcular</button>
  • 1

    It worked perfectly, thank you Matheus. Saved my life =D.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.