Change Word by clicking on it

Question

Change Word by clicking on it

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

I have the following field on 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 that mEq/L needed a script that when you clicked mEq/L it only changed the letter to mmol/L . Could someone help me?

javascript

asked by anonymous 13.03.2017 / 16:01

2 answers

1

Basically you just need to set a click event for the element. Note that I added an id in the div, you can use any selector you want, but be careful not to add the event to elements that do not 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>

13.03.2017 / 16:05

Differences between Cache and CDN usage alertDialog with confusing layout in fragment

score 2 · Accepted Answer

You can add a click event by using the selector class input-group-addon to select the div , and change 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>