2

Tem alguma maneira de eliminar essas inúmeras linhas de códigos mantendo a mesma função?(a função seria Manter o conteúdo da textarea oculto até que o check-box seja selecionado e manter ele apenas legível) Pois assim deixaria meu código um pouco menor e mais fácil de entender também.

Até o momento utilizei bastante o elemento document.getElementById e consegui entender até que de uma maneira fácil o seu funcionamento.

function consulta1() {
  if (document.getElementById('checkBA').checked) {
    document.getElementById('consT').value = "R$ 75,00";
    document.getElementById('consT').disabled = true;
  } else {
    document.getElementById('consT').value = "";
    document.getElementById("consT").readOnly = true;
    document.getElementById('consT').disabled = false;
  }
}

function consulta2() {
  if (document.getElementById('checkBB').checked) {
    document.getElementById('interT').value = "R$ 510,00";
    document.getElementById('interT').disabled = true;
  } else {
    document.getElementById('interT').value = "";
    document.getElementById("interT").readOnly = true;
    document.getElementById('interT').disabled = false;
  }
}

function consulta3() {
  if (document.getElementById('checkBC').checked) {
    document.getElementById('examT').value = "R$ 150,00";
    document.getElementById('examT').disabled = true;
  } else {
    document.getElementById('examT').value = "";
    document.getElementById("examT").readOnly = true;
    document.getElementById('examT').disabled = false;
  }
}
<form><fieldset><legend><font color="darkblue">Serviços</font></legend><br>
		<table width="80%" border="0" style= "border-color: Gainsboro" cellpadding="10">
				
		<tr>
		<td>
		<input type="checkbox" name="servico1" id="checkBA" onclick='consulta1()'; > 				
		Consulta <td><input type="text"  id="consT"  size="20" maxlength="35"readonly/></td>
		</td>
		</tr>
		<tr>
		<td>
		<input type="checkbox" name="servico2" id="checkBB" onclick='consulta2()'; />
	Internação <td><input type="text" id="interT" size="20" maxlength="35" readonly/></td>
		</td>
		</tr>
		<tr>
		<td>
		<input type="checkbox" name="servico3" id="checkBC" onclick='consulta3()'; />
		Exames Laboratoriais <td><input type="text" id="examT" size="20" maxlength="35" readonly /></td>
		</td>
		</tr>			
	</table><br>
 </fieldset> </form>

3 Respostas 3

3

Pode reduzir algumas coisa. Pode criar variáveis auxiliares para não ter que ficar o mesmo elemento várias vezes. Pode fazer com que o que não varia seja feito fora do if. Na verdade um dos valores já é um booleano, então pode usar a condição como o seu valor. Aí sobrando apenas 1 variável para decidir o que fazer basta usar o operador condicional no lugar do if.

Tem como reduzir o número de linhas, mas o código como um todo ficará maior.

function consulta1() {
  var elemento = document.getElementById('consT');
  var checado = document.getElementById('checkBA').checked;
  elemento.value = checado ? "R$ 75,00" : "";
  elemento.readOnly = true;
  elemento.disabled = checado;
}

function consulta2() {
  var elemento = document.getElementById('interT');
  var checado = document.getElementById('checkBB').checked;
  elemento.value = checado ? "R$ 510,00" : "";
  elemento.readOnly = true;
  elemento.disabled = checado;
}

function consulta3() {
  var elemento = document.getElementById('examT');
  var checado = document.getElementById('checkBC').checked;
  elemento.value = checado ? "R$ 150,00" : "";
  elemento.readOnly = true;
  elemento.disabled = checado;
}
<form><fieldset><legend><font color="darkblue">Serviços</font></legend><br>
        <table width="80%" border="0" style= "border-color: Gainsboro" cellpadding="10">
                
        <tr>
        <td>
        <input type="checkbox" name="servico1" id="checkBA" onclick='consulta1()'; >                
        Consulta <td><input type="text"  id="consT"  size="20" maxlength="35"readonly/></td>
        </td>
        </tr>
        <tr>
        <td>
        <input type="checkbox" name="servico2" id="checkBB" onclick='consulta2()'; />
    Internação <td><input type="text" id="interT" size="20" maxlength="35" readonly/></td>
        </td>
        </tr>
        <tr>
        <td>
        <input type="checkbox" name="servico3" id="checkBC" onclick='consulta3()'; />
        Exames Laboratoriais <td><input type="text" id="examT" size="20" maxlength="35" readonly /></td>
        </td>
        </tr>           
    </table><br>
 </fieldset> </form>

Coloquei no GitHub para referência futura.

2
  • Creio que seria melhor utilizar o 'let' para criar as váriaveis, ou sendo constantes utilizar o 'const'.
    – Peres
    Commented 26/11/2017 às 23:26
  • @RonaldoPeres limita onde pode rodar.
    – Maniero
    Commented 26/11/2017 às 23:55
2

Uma das formas de reduzir bastante é guardar os elementos trazidos pelo getElementById em variáveis fora das funções e apenas utiliza-las dentro das funções. Isto também pode tornar o seu código mais eficiente pois não está constantemente a navegar pelo html para obter os mesmos elementos. Pode não dar para fazer desta maneira se o html for atualizado dinamicamente.

A lógica que está a aplicar a cada check é igual mudando apenas o <input> e o valor, o que lhe permite generalizar o código se receber os 3 elementos que mudam.

Exemplo:

function consulta(checkId, inputId, valor) {
  const input = document.getElementById(inputId);

  if (document.getElementById(checkId).checked) {
    input.value = valor;
    input.disabled = true;
  } else {
    input.value = "";
    input.readOnly = true;
    input.disabled = false;
  }
}
<form>
  <fieldset>
    <legend>
      <font color="darkblue">Serviços</font>
    </legend><br>
    <table width="80%" border="0" style="border-color: Gainsboro" cellpadding="10">
      <tr>
        <td>
          <input type="checkbox" name="servico1" id="checkBA" onclick='consulta("checkBA","consT","R$ 75,00")' ;> Consulta
          <td><input type="text" id="consT" size="20" maxlength="35" readonly/></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="servico2" id="checkBB" onclick='consulta("checkBB","interT","R$ 510,00")' ; /> Internação
          <td><input type="text" id="interT" size="20" maxlength="35" readonly/></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="servico3" id="checkBC" onclick='consulta("checkBC","examT","R$ 150,00")' ; /> Exames Laboratoriais
          <td><input type="text" id="examT" size="20" maxlength="35" readonly /></td>
      </tr>
    </table><br>
  </fieldset>
</form>

Tive que alterar o onclick de cadca elemento para enviar para a função os 3 parametros:

onclick='consulta("checkBA","consT","R$ 75,00")'

Que são os que mudam para cada opção.

Pode simplificar ainda mais se trocar o primeiro parâmetro por this no onclick do html:

onclick='consulta(this,"consT","R$ 75,00")'

Que faz com que já receba o elemento na função, não sendo necessário fazer o document.getElementById:

function consulta(check, inputId, valor) {
  const input = document.getElementById(inputId);

  if (check.checked) { //check já é o elemento e não precisa de getElementById
    input.value = valor;
    input.disabled = true;
  } else {
    input.value = "";
    input.readOnly = true;
    input.disabled = false;
  }
}

Utilizando operadores ternários e dupla atribuição dá para compactar bastante mais:

function consulta(check, inputId, valor) {
  const input = document.getElementById(inputId);
  input.value = check.checked ? valor : "";
  input.readOnly = input.disabled = check.checked;
}
<form>
  <fieldset>
    <legend>
      <font color="darkblue">Serviços</font>
    </legend><br>
    <table width="80%" border="0" style="border-color: Gainsboro" cellpadding="10">
      <tr>
        <td>
          <input type="checkbox" name="servico1" id="checkBA" onclick='consulta(this,"consT","R$ 75,00")' ;> Consulta
          <td><input type="text" id="consT" size="20" maxlength="35" readonly/></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="servico2" id="checkBB" onclick='consulta(this,"interT","R$ 510,00")' ; /> Internação
          <td><input type="text" id="interT" size="20" maxlength="35" readonly/></td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" name="servico3" id="checkBC" onclick='consulta(this,"examT","R$ 150,00")' ; /> Exames Laboratoriais
          <td><input type="text" id="examT" size="20" maxlength="35" readonly /></td>
      </tr>
    </table><br>
  </fieldset>
</form>

1

Uma outra forma bem curta, seria criando um array com [id_do_campo=preço] sem que fosse preciso alterar nada no HTML original:

var els = ['consT=75,00','interT=510,00','examT=150,00'];
chks = document.querySelectorAll('input[type=checkbox]');
for(x=0;x<chks.length;x++){
   chks[x].addEventListener('change', function(e){
      var idx = (/.$/).exec(e.target.name);
      elp = els[idx-1].split('=');
      var el = document.getElementById(elp.shift());
      this.checked ?
      (el.value = 'R$ '+elp.pop(), el.disabled = true) :
      (el.value = '', el.readOnly = true, el.disabled = false)
   });
}
<form><fieldset><legend><font color="darkblue">Serviços</font></legend><br>
   <table width="80%" border="0" style= "border-color: Gainsboro" cellpadding="10">
      <tr>
         <td>
            <input type="checkbox" name="servico1" id="checkBA" > 				
            Consulta <td><input type="text"  id="consT"  size="20" maxlength="35" readonly/></td>
         </td>
      </tr>
      <tr>
         <td>
            <input type="checkbox" name="servico2" id="checkBB" />
            Internação <td><input type="text" id="interT" size="20" maxlength="35" readonly/></td>
         </td>
      </tr>
      <tr>
         <td>
            <input type="checkbox" name="servico3" id="checkBC" />
            Exames Laboratoriais <td><input type="text" id="examT" size="20" maxlength="35" readonly /></td>
         </td>
      </tr>			
   </table><br></fieldset>
</form>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .