Question

请帮助！我试图使用JavaScript构建一个迷你贷款资格网络应用程序，但是我的问题是显示结果没有显示出单击资格按钮后似乎显示的内容。

下面是我的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>

Answer 1

主要问题是您需要在单击按钮的调用函数中声明这些输入值。否则，它们都将被设置为加载为（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>

显示结果未显示

1 个答案: