Как получить значение из ввода

Question

Я пытаюсь поймать изменение ввода, но оно не работает с кнопкой увеличения или уменьшения значения, какое здесь решение?

<div class="container">
          <button id="tang" class="btn btn-success">+</button>
          <input type="text"  name="" id="number" value="1"">
          <button id="giam" class="btn btn-danger">-</button>
          <h1 id="show"></h1>
      </div>

$("#tang").click(function(){
            let result = parseInt($("#number").val()) +1 ;
            $("#number").val(result);
        });
        $("#giam").click(function(){
            let result = parseInt($("#number").val()) -1 ;
            $("#number").val(result);
        });

        $("#number").change(function(){
            $("#show").text($("#number").val());
        })

Answer 1

Пожалуйста, обратитесь ниже код. Вам нужно будет вызвать событие изменения из кнопки увеличения или уменьшения.

$("#tang").click(function() {
  let result = parseInt($("#number").val()) + 1;  
  $("#number").val(result).change();
});
$("#giam").click(function() {
  let result = parseInt($("#number").val()) - 1;  
   $("#number").val(result).change();
});

$("#number").change(function() {
  $("#show").html($("#number").val());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
          <button id="tang" class="btn btn-success">+</button>
          <input type="text"  name="" id="number" value="1"">
          <button id="giam" class="btn btn-danger">-</button>
          <h1 id="show"></h1>
      </div>

Answer 2

Это работает для меня. Вот рабочий код: https://jsfiddle.net/297s50gk/

Вы включили jQuery на своей странице?

HTML

<div class="container">
  <button id="tang" class="btn btn-success">+</button>
  <input type="text"  name="" id="number" value="1"">
  <button id="giam" class="btn btn-danger">-</button>
  <h1 id="show"></h1>
</div>


$("#tang").click(function(){
  let result = parseInt($("#number").val()) +1 ;
  $("#number").val(result);
});
$("#giam").click(function(){
  let result = parseInt($("#number").val()) -1 ;
  $("#number").val(result);
});

$("#number").change(function(){
  $("#show").text($("#number").val());
})

Answer 3

Есть 2 варианта

1. Триггер change, например $("#number").change(). Тем не менее, ваш код повторяется множество кода без необходимости.
2. Вы должны рефакторинг кода, как показано ниже.

$("#tang").click(function(){
    let result = parseInt($("#number").val()) + 1 
    AssignThenDisplayValue(result);
});
$("#giam").click(function(){
    let result = parseInt($("#number").val()) - 1 ;
    AssignThenDisplayValue(result);
});

$("#number").change(function(){
    AssignThenDisplayValue($("#number").val());
});

function AssignThenDisplayValue(value){;
  $("#number").val(value);
  $("#show").text(value);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
          <button id="tang" class="btn btn-success">+</button>
          <input type="text"  name="" id="number" value="1">
          <button id="giam" class="btn btn-danger">-</button>
          <h1 id="show"></h1>
      </div>

Answer 4

В вашем коде есть опечатка , и вы заверните все функции внутри в document.ready.

опечатка в этой строке
<input type="text" name="" id="number" value="1""> // удалите одну двойную кавычку.

$(document).ready(function(){
       $("#tang").click(function(){
             var container=$("#number");
            let result = parseInt(container.val()) +1 ;
            container.val(result);
            container.val(result).change();
        });
        $("#giam").click(function(){
            var container=$("#number");
            let result = parseInt(container.val()) -1 ;
            if(result<0)
              result=0;
            container.val(result);
            container.val(result).change();
        });

        $("#number").change(function(){
            $("#show").text($("#number").val());
        })
   })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
          <button id="tang" class="btn btn-success">+</button>
          <input type="text"  name="" id="number" value="1">
          <button id="giam" class="btn btn-danger">-</button>
          <h1 id="show"></h1>
 </div>

Answer 5

В качестве быстрого исправления вы можете добавить триггер события к своим строкам в кнопке .click, например,

$("#number").val(result).change();

. Вы можете go далее и объединить две функции click() в одну ( с предложением if для увеличения / уменьшения значения).