Only the last case of the switch runs

Question

I am creating a page where when the customer selects the model of some board, the height and width of the wall, will display on the screen values based on the board that the customer selected. However, only the values of the last switch is executed.

The other cases do not run, even the user selecting the 4-star model; when displaying the values, it shows the values of the eclipse model, which is the last option of the 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;
        }
    }

Answer 1

I chose to decrease the code of its function calculatValue() 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>