Exibir resultado de Switch Case dentro do Input

[DieoRLS]

Fala galera, é o seguinte, estou criando um página dentro da plataforma Blogger e nessa página eu tenho um formulário (calculadora), onde após o preenchimento e o cálculo é exibido dois resultado.

Um número que é calculado através uma função JQuery e um nivel de experiencia que é analisado através de um switch case levando em consideração o número do cálculo.

O resultado tanto do número quanto do nivel de experiencia são exibidos em dois inputs dentro do formulário, o problema é que, o resultado do cálculo eu consegui fazer aparecer dentro do input, mas o resultado do switch case não aparece no input, quando testei para exibir o resultado do switch case dentro de um span funcionou (o switch case está funcionando), então queria saber como consigo exibir o resultado switch case dentro de um input para ficar padronizado.

Quem poder ajudar agradeço.

<!-- CALCULADORA DE CARGA ALAR -->
<script type="text/javascript">
$(document).ready(function(){
  var botao = $(".botao");
  
  botao.on("click", function(){
  	var pessoa = $("#pessoa").val();
  	var equipamento = $("#equipamento").val();
  	var velame = $("#velame").val();
  	var calculo = ((parseFloat(pessoa) + parseFloat(equipamento)) * 2.2) / parseFloat(velame);
    var cargaAlar = calculo.toFixed(2); 
    $("#resultado").val(cargaAlar);

<!-- VERIFICAR NIVEL DE EXPERIENCIA -->    
  switch (true) {
	  case (cargaAlar <= 1.1): $(".experiencia").html("Iniciante"); break;
	  case (cargaAlar > 1.1 && cargaAlar <= 1.3): $(".experiencia").html("Intermediário"); break; 
	  case (cargaAlar > 1.3 && cargaAlar <= 1.5): $(".experiencia").html("Avançado"); break;
	  case (cargaAlar > 1.5): $(".experiencia").html("Experiente"); break;
  default:
    console.log('Desculpe, houve erro no cálculo, tente novamente.');
 		} 
	});
});
</script>

<!-- FORMULARIO DE PREENCHIMENTO E RESULTADO -->
<form action="" method="post" name="calcform">
   <fieldset>
     <label>Peso da Pessoa (kg):</label>
     <input id="pessoa" name="pessoa" type="text" value="70" />

     <label>Peso do Equipamento (kg):</label>
     <input id="equipamento" name="equipamento" type="text" value="12" />
     
     <label>Tamanho do Velame (ft):</label>
     <input id="velame" name="velame" type="text" value="190" />

     <label></label>
     <input class="botao" type="button" value="Calcular" />
     
     <label></label>
     <label>Carga Alar: <input disabled id="resultado" value=""></label>
     <label>Nível de Experiência: <input disabled id="experiencia" value=""></label>
	 <!-- No span o resultado aparece normal <label>Nível de Experiência: <span class="experiencia"></span></label> -->
   </fieldset>
</form>

 

Editado Novembro 7, 2020 por DieoRLS
Erro ortográfico

[TheHatter]

Primeiro sugiro que você coloque nos input com id de "resultado" e  "experiencia" coloque um readonly para não ser possível o client escrever nele. 

Ao clicar no botão remova o atributo "disabled" dos inputs "resultado" e "experiencia" para liberá-los e continua normalmente os cálculos. E um erro no  `switch` que você fez ao colocar os valores no input "experiencia" você colocou como classe assim: $(.experiencia), porém ele é um id e seria assim:  $(#experiencia).

<script type="text/javascript">
    $(document).ready(function(){
      var botao = $(".botao");
      
      botao.on("click", function(){
          $('#resultado').removeAttr('disabled')
          $('#experiencia').removeAttr('disabled')
          var pessoa = $("#pessoa").val();
          var equipamento = $("#equipamento").val();
          var velame = $("#velame").val();
          var calculo = ((parseFloat(pessoa) + parseFloat(equipamento)) * 2.2) / parseFloat(velame);
        var cargaAlar = calculo.toFixed(2);
        $('#resultado').val(cargaAlar)
        
    
      switch (true) {
          case (cargaAlar <= 1.1): $("#experiencia").val("Iniciante"); break;
          case (cargaAlar > 1.1 && cargaAlar <= 1.3): $("#experiencia").val("Intermediário"); break; 
          case (cargaAlar > 1.3 && cargaAlar <= 1.5): $("#experiencia").val("Avançado"); break;
          case (cargaAlar > 1.5): $("#experiencia").val("Experiente"); break;
      default:
        console.log('Desculpe, houve erro no cálculo, tente novamente.');
             } 
        });
    });

<form action="" name="calcform">
    <fieldset>
      <label>Peso da Pessoa (kg):</label>
      <input id="pessoa" name="pessoa" type="text" value="70" />
 
      <label>Peso do Equipamento (kg):</label>
      <input id="equipamento" name="equipamento" type="text" value="12" />
      
      <label>Tamanho do Velame (ft):</label>
      <input id="velame" name="velame" type="text" value="190" />
 
      <label></label>
      <input  class="botao" type="button" value="Calcular" />
      
      <label></label>
      <label>Carga Alar: <input disabled readonly id="resultado" value=""></label>
      <label>Nível de Experiência: <input disabled readonly id="experiencia" value=""></label>
    </fieldset>
 </form>

Espero ter ajudado, é a minha primeira vez aqui.

Editado Novembro 30, 2020 por TheHatter