Javascript-форум - Cчётчик значений value в элементе формы input type="text"?

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Cчётчик значений value в элементе формы input type="text"? (https://javascript.ru/forum/jquery/27146-cchjotchik-znachenijj-value-v-ehlemente-formy-input-type%3D-text.html)

Cчётчик значений value в элементе формы input type="text"?

Подскажите, пожалуйста, как сделать счётчик значений value в элементе формы input type=”text” при клике на изображение (стрелочки – влево, право)

<a href="#">
<img class="left" alt="" src="left.gif">
</a>
<input id="test" class="text" type="text" value="1" name="test">
<a href="#">
<img class="right" alt="" src="right.gif">
</a>

Спасибо!

Цитата:

Сообщение от Surlik

счётчик значений value

а теперь тоже самое, только нормальными словами :)

пользователь ввёл цифру, и с помощью стрелочек может увеличить/уменьшить её на 1?

Цитата:

Сообщение от T-sh (Сообщение 166880)

Да вот это я и хотел узнать как сделать! :)

<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
 var input = $('#inp'); // наш инпут
 var a; // тут будел лежать текущее значение
          $('.plus').click(function(){ // по клику на плюс
			  a = input.val();  // получить текущее значение
			  a++; // увеличить на 1
			  input.val(a); // вернуть инпуту
		  });
		  
		  $('.minus').click(function(){ // по клику на минус
			  a = input.val();  // получить текущее значение
			  a--; // уменьшить на 1
			  input.val(a); // вернуть инпуту
		  });
});
</script>
</head>
<body>  

<input type="text" id="inp" value ="1" />

<div class="plus" style=" display: inline-block; height: 20px; width: 20px; background-color: red;">+</div>
<div class="minus" style="display: inline-block; height: 20px; width: 20px; background-color: green; margin-right: 10px;">-</div>
</body>
</html>

T-sh, большое спасибо!
А как сделать в вашем коде так чтобы значения не становились отрицательными!

$('.minus').click(function(){ // по клику на минус
              a = input.val();  // получить текущее значение
              a = (a<1)?1:a;  // если а < 1 (равно нулю), то сделать его единицей, иначе — оставить значение. 
              a--; // уменьшить на 1
              input.val(a); // вернуть инпуту
          });

вернее, даже так:

$('.minus').click(function(){ // по клику на минус
			  a = input.val();  // получить текущее значение
			  a = (a<1)?0:a-1;
			  input.val(a); // вернуть инпуту
		  });

Эххх учиться и учиться:)
Спасибо!

У меня еще вопросик? Сейчас выводится результат (Сумма:) только когда я ввожу значение c клавиатуры и нажимаю ввод, а вот по плюс/минус в режиме так сказать «реального времени» Не работает! Спасибо!

<script >
$(document).ready(function() {
form = $("#calc");
var input = $('.inp'); // наш инпут
var a; // тут будел лежать текущее значение
        $('.plus').click(function(){ // по клику на плюс
			  a = input.val();  // получить текущее значение
			  a++; // увеличить на 1
			  input.val(a); // вернуть инпуту
		  });
		  $('.minus').click(function(){ // по клику на минус
			  a = input.val();  // получить текущее значение
			  a = (a<1)?0:a-1;
      //  a--; // уменьшить на 1
			  input.val(a); // вернуть инпуту
		  });
$("#sum span").text("0");
form.change(function() {
  	     totalSum = 0
				$("#input").each(function() {
						var input = parseInt($("#input").val()) * parseInt($("#input").attr("name"));
						totalSum += input;
    		});	
				$("#sum span").text(totalSum);
		});
});

</script>
</head>
<body>
<form>
<div id="calc">        
<input type="text" class="inp" value ="0" id="input" name="100" />
<div class="plus" style=" display: inline-block; height: 20px; width: 20px; background-color: red;">+</div>
<div class="minus" style="display: inline-block; height: 20px; width: 20px; background-color: green; margin-right: 10px;">-</div>
<input type="text" class="inp_tu" value ="0" id="input" name="100" />
</div>
</form>
<p id="sum">Сумма:<strong><span></span></strong> р.</p>
</body>