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?
8
-
what do you mean by sign ?Aditya Shankar– Aditya Shankar2019-01-19 12:51:19 +00:00Commented Jan 19, 2019 at 12:51
-
I don't understand ?Patryk Przybylski– Patryk Przybylski2019-01-19 12:51:29 +00:00Commented Jan 19, 2019 at 12:51
-
I mean when i remove text from input, value of span element should decrease.Patryk Przybylski– Patryk Przybylski2019-01-19 12:52:11 +00:00Commented Jan 19, 2019 at 12:52
-
"when I remove the sign, the value decreases by 10" which sign are you talking about ?Aditya Shankar– Aditya Shankar2019-01-19 12:52:17 +00:00Commented Jan 19, 2019 at 12:52
-
so when you remove a character from the input the value decreases by 10 ?Aditya Shankar– Aditya Shankar2019-01-19 12:52:58 +00:00Commented Jan 19, 2019 at 12:52
|
Show 3 more comments
2 Answers
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">
Comments
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>