显示结果未显示
显示结果未显示
提问于 2020-07-09 05:04:12
请帮帮我！我试图使用JavaScript构建一个小型贷款资格web应用程序，但我的问题是，显示结果没有显示在单击资格按钮后显示的内容。
下面是我的HTML和JavaScript代码。
let Amount = document.querySelector("#amount").value;
let Duration = document.querySelector("#years").value;
let amt = parseInt(Amount);
let dura = parseInt(Duration);
let Message = document.querySelector("#result");
//const Income = parseInt(Amount.value);
//const Years = parseInt(Duration.value);
function eligibility(){
if(amt < parseInt(50000) ){
Message.textContent = "Please! You're not eligible for the loan";
// console.log('Try again')
} else if(amt >= parseInt(50000) ) {
Message.textContent = "Please Fill the form below and apply"
// console.log('Please Fill the form below and apply')
}
}<html>
<form action="" role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-plus"></span>
</span>
<input type="number" class="form-control" placeholder="Income" id="amount" required />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
<input type="number" class="form-control" placeholder="Duration" id="years" required />
</div>
</div>
<button type="" class="btn btn-primary btn-block" onclick="eligibility()">Check Eligibility</button>
<div id="result">
</div>
</form>
</html>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-07-09 05:27:31
主要的问题是，您需要在单击按钮时调用的函数中声明这些输入值。否则，它们都将被设置为它们加载的值(null)
我更改了你的一些代码，并添加了注释。希望这能有所帮助
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<html>
<form action="" role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-plus"></span>
</span>
<input type="number" class="form-control" placeholder="Income" id="amount" required />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
<input type="number" class="form-control" placeholder="Duration" id="years" required />
</div>
</div>
<button type="" class="btn btn-primary btn-block" onclick="eligibility()">Check Eligibility</button>
<div id="result">
</div>
</form>
</html>
<script type="text/javascript">
//const Income = parseInt(Amount.value);
//const Years = parseInt(Duration.value);
function eligibility(){
//You need the declare these values inside the function (getting them globally will only get the value they are when page loads up)
let Amount = document.querySelector("#amount").value;
let Duration = document.querySelector("#years").value;
let amt = parseInt(Amount);
let dura = parseInt(Duration);
let Message = document.querySelector("#result");
if(amt < 50000){
Message.innerText = "Please! You're not eligible for the loan";
// console.log('Try again')
}
//Change this else-if to just an else since you are just checking for the exact opposite of your if statement
else{
Message.innerText = "Please Fill the form below and apply"
// console.log('Please Fill the form below and apply')
}
}
//Prevent form from submitted or else page will reload and no message would be shown
document.querySelector('form').addEventListener('submit', (e)=>{
e.preventDefault();
});
</script>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62803615
复制相关文章
相似问题
腾讯云开发者
