Only the last switch case is executed

Question

Only the last switch case is executed

Navigation

#1 by (1 votes)

-2

I'm creating a page where when the client selects the template for some board, the height and width of the wall, it will display on the screen values based on the board that the client selected. However, only the values of the last case of switch are executed.

The other cases do not run, even the user selecting the 4-star template; at the time of displaying the values, shows the values of the eclipse model, which is the last option of switch .

<select id="calcOrcamento" class="form-control" required="required" name="modelo" onBlur="validaModelo(this); ">
    <option value="" disabled selected>Selecione um Modelo</option>
    <option id="estrelas"   value="7"  >4 Entrelas    </option>
    <option id="piramide"    value="10" >Pirâmide     </option>
    <option id="eclipse"     value="7"  >Eclipse      </option>
    <option id="concavo"     value="7"  >Côncavo      </option>
    <option id="quadradinha" value="16" >Quadradinha  </option>
    <option id="onda"        value="8"  >Onda         </option>
    <option id="mosaico"     value="13" >Mosaico      </option>
    <option id="santome"     value="10" >Santo Mé     </option>
</select>

<div id="exibe"></div>

<div>
    <input type="button" value="Calcular" onClick="calculaValor();"/>
</div>

function calculaValores(modelo,altura,largura){
    var area = altura*largura;
    var calc = parseFloat((area*modelo).toFixed(2));
    var valor = parseFloat((area*120).toFixed(2));
    document.getElementById('exibe').innerHTML = "<b>Quantidade de Placas: " + calc + "<br> Valor Instalação: " + valor + "</b>";
    document.calculaOrc.submit;
}

function calculaValor(){
    var estrelas    = (document.getElementById('estrelas')    ,'4estrelas'  );
    var piramide    = (document.getElementById('piramide')    ,'piramide'   );
    var eclipse     = (document.getElementById('eclipse')     ,'eclipse'    );
    var concavo     = (document.getElementById('concavo')     ,'concavo'    );
    var quadradinha = (document.getElementById('quadradinha') ,'quadradinha');
    var onda        = (document.getElementById('onda')        ,'onda'       );
    var mosaico     = (document.getElementById('mosaico')     ,'mosaico'    );
    var santome     = (document.getElementById('santome')     ,'santome'    );
    var placa       = [estrelas,piramide,eclipse,concavo,quadradinha,onda,mosaico,santome];

    var altura      = document.getElementById('altura') .value;
    var largura     = document.getElementById('largura').value;
    var i;
    for(i=0 ; i<=placa.length ; i++){
        switch(placa[i]){
            case '4estrelas':
                var estrela = (document.getElementById('estrelas').value);
                calculaValores(estrela,altura,largura);
                break;

            case 'piramide':
                var piramide = (document.getElementById('piramide').value);
                calculaValores(piramide,altura,largura);
                break;

            case 'eclipse':
                var eclipse = (document.getElementById('eclipse').value);
                calculaValores(eclipse,altura,largura);
                break;

            default:
                break;
        }
    }
}

  function validaModelo(modelo){
        var msg = "Modelo Inválido.";
        var info = "Selecionar um Modelo";

        if(modelo.value == ''){
            estilizandoErro(modelo,msg,info);

        }
    }

 function estilizandoErro(variavel,msg,info){
        variavel.value = "";
        variavel.placeholder = msg;
        variavel.style.borderColor = "#ff0000";
        variavel.style.outline = "#ff0000";
        variavel.focus();
        variavel.onkeydown = function keydown_nome(){
            variavel.placeholder = info;
            variavel.style.borderColor = "#999999";
            variavel.style.outline = null;
        }
    }

javascript html5

asked by anonymous 22.08.2017 / 19:22

1 answer

Logo, trademark rights [closed] HTML - How to show / hide content when clicking on a link? [closed]

score 1 · Accepted Answer

I chose to lower the code of your calculaValor () function and also created fictitious values for height and width. This way the calculation is performed.

<script>
    function calculaValores(modelo, altura, largura) {
        var area = altura * largura;
        var calc = parseFloat((area * modelo).toFixed(2));
        var valor = parseFloat((area * 120).toFixed(2));
        document.getElementById('exibe').innerHTML = "<b>Quantidade de Placas: " + calc + "<br> Valor Instalação: " +
            valor + "</b>";
        document.calculaOrc.submit;
    }

    function calculaValor() {

        var placa = document.getElementById('calcOrcamento').value;

        var altura = document.getElementById('altura').value;
        var largura = document.getElementById('largura').value;

        calculaValores(placa, altura, largura);
        }

    function validaModelo(modelo) {
        var msg = "Modelo Inválido.";
        var info = "Selecionar um Modelo";

        if (modelo.value == '') {
            estilizandoErro(modelo, msg, info);
        }
    }

    function estilizandoErro(variavel, msg, info) {
        variavel.value = "";
        variavel.placeholder = msg;
        variavel.style.borderColor = "#ff0000";
        variavel.style.outline = "#ff0000";
        variavel.focus();
        variavel.onkeydown = function keydown_nome() {
            variavel.placeholder = info;
            variavel.style.borderColor = "#999999";
            variavel.style.outline = null;
        }
    }
</script>