Question

我正在尝试让用户输入类似2030年的年份，这将告诉您Bob自1996年出生以来已经34岁。因此，我希望输出为“ Bob is YEAR Inputd-1996 in年份”（鲍勃在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

请查看代码段。

.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>

希望有帮助。

编辑：：请尝试使用新代码，如果仍有问题，请告诉我。

Answer 2

发布代码中的一些内容。

您的脚本打开和关闭语法不匹配。
您的文本框ID诞生了-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>

通过用户输入的jQuery

2 个答案: