Change Word by clicking on it

Asked

Viewed 54 times

1

I have the following field in my system:

<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>

In the second div who is mEq/L needed a script that when you click on mEq/L he changed only the letter to mmol/L. Could someone help me ?

javascript

  • Totally off-topic, but I was interested in your chemical project, if you need help.

2 answers

2


You can add an event from click using as selector the class input-group-addon to select the div, and amend the text:

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>

  • the script is exactly this, I wonder if there is how to modify it to keep changing between 'meq/L' to 'mmol/L' is possible ?

  • It is possible yes @Leonardomacedo, but that’s not what you asked for, which in a way kind of invalidates my answer and that of jbueno.

  • Edited by @Leonardomacedo.

  • I couldn’t express myself right, I apologize!

  • thanks a lot for the help! , I need 5 minutes to validate as correct the answer

1

Basically you just need to set a click event for the element. Note that I added an id to the div, you can use any selector you want, but be careful not to add the event to elements that don’t need to have this behavior.

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>

  • the script is exactly this, I wonder if there is how to modify it to keep switching between 'meq/L' for 'mmol/L' is possible ?

  • That’s the edition. Enjoy

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.