CODEWITHSUNDEEP
javascriptjquery
Patryk Przybylski
Patryk Przybylski

Reputation: 53

js/jquery add or remove value when enter text in input

I have input with id = "input-price" and element span with some numerical value, e.g. 100. I would like that with each entered character in input, the value of 100 increased by 10 while when I remove the characters, the value decreases by 10. How to do it?

Upvotes: 0

Views: 59

Answers (2)

Aditya Shankar
Aditya Shankar

Reputation: 742

Try this -

var priceInput = document.getElementById("input-price");

priceInput.addEventListener("input", representValue)

function representValue(){
   var numOfChars = priceInput.value.length;
   
   var magicSpan = document.getElementById("magic-value");
   value = 100 + (numOfChars*10);
   magicSpan.textContent = value;
}
<span id="magic-value">100</span>
<input id="input-price" type="text">

Upvotes: 3

Mamun
Mamun

Reputation: 68933

You can try the following way:

var length = $('#input-price').val().length;
$('#input-price').on('input', function(){
  var n = Number($('#spanNumber').text());
  if(length < $('#input-price').val().length){
    $('#spanNumber').text(n + 10);
    length++
  }
  else{
    $('#spanNumber').text(n - 10);
    length--
  }  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input-price"/>
<span id="spanNumber">100</span>

Upvotes: 1

Related Questions