Replace text content of Current Target

user_14596502 0
Viewed 248

I have 4 sliders on my website and would like to change the values of the slide and replace it with text.

$('.slider').on('input', (event) => {
  if ($(event.currentTarget).val() === '0') {
    $(event.currentTarget).text('test');

  } else if (event.currentTarget.value === '1') {
    console.log('display')
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slidecontainer mx-4 text-center pb-4 w-50 mx-auto">
  <input type="range" min="0" max="3" value="0" class="slider" id="range-bureautique">to be replaced
  <div class="display linest" id="score-bureautique"></div>
</div>
</div>

With console.log() I can see that the value is getting equat to 0 or to 1 when i move the slider but the html content is not replaced with my 'test' text ...

Thanks!

jquery javascript
1 Answers

This $(event.currentTarget).text('test') will update the text-content of the input-tag. But there is no such thing! Note that there is no end-tag to the input-tag. You should use some tag with id set ideally. Something like this:

<input ...><label id="my_label">to be replaced</label>

Then you use any of this jQuery thing to update the text:

$("#my_label").text('test');
$("#my_label").text($(event.currentTarget).val());

So with an update to the snippet:

$('.slider').on('input', (event) => {
    $("#my_label").text($(event.currentTarget).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="slidecontainer mx-4 text-center pb-4 w-50 mx-auto">
  <input type="range" min="0" max="3" value="0" class="slider" id="range-bureautique">
      <label id="my_label">to be replaced</label>
  <div class="display linest" id="score-bureautique"></div>
</div>
</div>

user_425800
Related