Нахождение возраста по пользовательскому вводу jQuery

Question

Я пытаюсь, чтобы пользователь ввел год, например, 2030, он примет это и скажет, что Бобу 34 года, так как он родился в 1996 году. Поэтому я хочу, чтобы вывод был "Боб введен в ГОД - 1996 год вВХОД В ГОД "(Бобу в 2030 году 34 года).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
          //year
            $("#year_button").on("click", function(){ //on click of year button 
              var inputYear = $("#yearborn").val();
              var age = inputYear - 1996;
              if(inputYear > 1996){
                $(".show-age").html("Bob is "+age+" Year old in "+inputYear+"");
              } else {
                $(".show-age").html("Please add a number more than 1996");
              }
            });
          </script>

        <div id="year">
              <p>Enter a Year: <input id="yearborn" type="number"/> 
              <div id="year_button">
                <button type="button" id="year_button">Enter</button> </p>
              </div>
        </div>

        <div class="show-age"></div>

Answer 1

Несколько вещей из вашего размещенного кода.

• Ваш синтаксис открытия и закрытия скрипта не совпадает.
• Ваш идентификатор текстового поля годовалый - var inputYear = $("#year").val();
• с jquery, вы можете вызвать действие, нажав кнопку, поэтому нет необходимости добавлять onclick="yearinputed().Вы также не определили эту функцию.

Ниже я отредактировал ваш фрагмент кода и выглядит работающим.

      $("#year_button").on("click", function(){ //on click of year button 
      var inputYear = $("#yearborn").val();
      var age = inputYear - 1996;
      if(inputYear > 1996){
        $(".show-age").html("Bob is "+age+" Year old in "+inputYear+"");
      } else {
        $(".show-age").html("Please add a number more than 1996");
      }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="year">
      <p>Enter a Year: <input id="yearborn" type="number"/> 
      <div id="year_button">
        <button type="button" id="year_button">Enter</button> </p>
      </div>
    </div>
    
    <div class="show-age"></div>

Answer 2

Пожалуйста, посмотрите на фрагмент кода.

.form-wrap{
  display: flex;
}

.get-age{
  padding: 10px;
  background: #ddd;
  cursor: pointer;
  margin-left: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

 <div id="year">
  <p>Enter a Year: <input id="yearborn" type="number" > 
      <button type="button" id="submityear">Enter</button> 
  </p>
</div>

<div class="show-age"></div>

<script type="text/javascript">
  $("#submityear").on("click", function(){
  var inputYear = $("#yearborn").val();
  var age = inputYear - 1996;
  if(inputYear > 1996){
    $(".show-age").html("Bob is "+age+" Year old in "+inputYear+"");
  } else {
    $(".show-age").html("Please add a number more than 1996");
  }
});
</script>

Надеюсь, это поможет.

Редактировать: Пожалуйста, попробуйте новый код и дайте мне знать, если у вас все еще есть какие-либовыпуск.