从用户输入 jQuery 中查找年龄

Question

我试图让用户输入像 2030 这样的年份，它会告诉你鲍勃自 34 年出生以来是 1996 岁。所以我希望输出是"Bob 是输入年份 - 1996 in YEAR INPUTTED"(Bob 在 34 年是 2030

。

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