Failure to Present Outcome on Screen

Question

Failure to Present Outcome on Screen

Seeking assistance! I attempted to create a mini loan eligibility web app using JavaScript, but encountered an issue where the displayed result did not match the expected outcome upon clicking the eligibility button.

Here is the HTML and JavaScript Code I used:

 


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>

javascript html css bootstrap-4

Answer 1

Answer №1

The key issue identified was the necessity to declare input values within the function being called on button click. Failure to do so would result in all values defaulting to null upon page load.

I have made modifications to your code and provided comments for clarity. Hopefully, this brings some assistance

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

Answer 2

The key issue identified was the necessity to declare input values within the function being called on button click. Failure to do so would result in all values defaulting to null upon page load.

I have made modifications to your code and provided comments for clarity. Hopefully, this brings some assistance

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

Failure to Present Outcome on Screen

Answer №1

Similar questions

How do I resolve the issue of a non-iterable 'int' object?

Dealing with an Undefined Property: Troubleshooting Guide

Contrast the schedules of two different calendars

Retrieving the caret's position in TinyMCE 4

Navigating Through Secondary Navigation with Ease

What could be the reason for my post container not functioning properly?

Perform the function prior to making any adjustments to the viewmodel attributes

What is the best way to align inline-block elements in the center?

Prevent iPhone from automatically changing phone numbers to grey text color

CSS inline-block element disregarding margins and padding

Styling errors in AngularJS validation code

What techniques are most effective for concealing a div container through css?

In what ways can the accessibility of a website be impacted by using CSS

How to center elements using Bootstrap 4 and flexbox styling

Struggling to make partial updates to a field within my CRUD update function

IE7 is throwing an error saying "Object Expected" when handling the JSON response. This issue does not

Parsing DOM data from an HTTP request in Node.js

Which specific transitionend (or animationend) event should I use for this application?

Adding extra fields to an existing JSON response in a TypeScript REST API

A hobby project involving the creation of a webmail app using a combination of PHP