1

Eu tenho o seguinte campo em meu sistema:

<div class="col-lg-2 target" id="cread1nd">
    <div style="width: 150px;" class="input-group ">
        <input type="text" placeholder="00.00" name="cread1" class="form-control" min="0" max="15" />
        <div style="background: #E0E1E2;" class="input-group-addon">mEq/L</div>
    </div>
</div>

Na segunda div que está mEq/L precisava de um script que quando clicar em mEq/L ele alterava somente a letra para mmol/L. Alguém poderia me ajudar ?

1
  • Totalmente off-topic, mas fiquei interessado pelo seu projeto químico, se precisar de ajuda. Commented 13/03/2017 às 15:15

2 Respostas 2

2

Você pode adicionar um evento de click usando como seletor a classe input-group-addon para selecionar a div, e alterar o texto:

document.querySelector('.input-group-addon').addEventListener('click', function(event){
  if (this.innerHTML == 'mEq/L')
    this.innerHTML = 'mmol/L';
  else
    this.innerHTML = 'mEq/L';
});
<div class="col-lg-2 target" id="cread1nd">
  <div style="width: 150px;" class="input-group ">
    <input type="text" placeholder="00.00" name="cread1" class="form-control" min="0" max="15" />
    <div style="background: #E0E1E2;" class="input-group-addon">mEq/L</div>
  </div>
</div>

5
  • o script é exatamente este, queria saber se tem comom modificar ele pra ficar trocando entre 'mEq/L' para 'mmol/L' é possivel ? Commented 13/03/2017 às 15:07
  • É possível sim @LeonardoMacedo, mas não foi isso que você pediu, o que de certa forma meio que inválida a minha resposta e a do jbueno.
    – BrTkCa
    Commented 13/03/2017 às 15:08
  • Editado @LeonardoMacedo.
    – BrTkCa
    Commented 13/03/2017 às 15:10
  • Não consegui me expressar direito, peço desculpas! Commented 13/03/2017 às 15:10
  • muito obrigado pela ajuda!, preciso de 5 minutos pra validar como correta a resposta Commented 13/03/2017 às 15:11
1

Basicamente você só precisa definir um evento de click para o elemento. Perceba que eu adicionei um id na div, você pode usar qualquer seletor que quiser, mas cuidado para não adicionar o evento a elementos que não precisam ter este comportamento.

document.getElementById('clique').addEventListener('click', onClick);

function onClick(){
  this.innerText = (this.innerText == 'mmol/L') ? 'mEq/L' : 'mmol/L';
}
<div class="col-lg-2 target" id="cread1nd">
    <div style="width: 150px;" class="input-group ">
        <input type="text" placeholder="00.00" name="cread1" class="form-control" min="0" max="15" />
        <div id="clique" style="background: #E0E1E2;" class="input-group-addon">mEq/L</div>
    </div>
</div>

2
  • o script é exatamente este, queria saber se tem como modificar ele pra ficar trocando entre 'mEq/L' para 'mmol/L' é possivel ? Commented 13/03/2017 às 15:07
  • Tá aí a edição. Bom proveito
    – Jéf Bueno
    Commented 13/03/2017 às 15:15

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 .