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

Tips on adding line breaks after periods that are not at the end of a sentence in HTML text nodes with regular expressions

sharing data between two node.js servers using http

The jQuery ajax request was unsuccessful in connecting to the remote server

Having problems with loading @font-face in Ionic Framework Android app build?

Guide on how to showcase the template by leveraging the roomList information with ngTemplateOutlet in Angular

Enhancing Your WordPress Menu with Customized Spans

Encountering an issue while attempting to implement Redux Toolkit alongside the MUI ToggleButtonGroup component

Having trouble appending a new attribute to the Mongoose output

What strategy should be employed to ensure that Javascript is operational upon completion of page loading?

Alert: Refs cannot be assigned to function components. Any attempt to access this ref will result in failure. Have you considered using React.forwardRef()? displayed in the @Mui Component

What are the best practices for handling dynamic content internationalization in Angular?

Trouble with Flex 3 styles not fully applying to dynamically generated tabs within a TabNavigator

Utilizing Angular 2+ to effectively manipulate the HTML Document Object Model with JavaScript in order to execute scripts

Can you provide a method for verifying an 'undefined' variable in AJAX queries?

Having trouble aligning two divs on the same line and adjusting the controls to expand their width when there is extra space

Angular 8 combined with Mmenu light JS

Be warned: Babel has detected a duplicate plugin or preset error

Round Loading Animation in CSS

Could someone provide a detailed explanation of exhaustMap in the context of Angular using rxjs?

Ways to retrieve the parent DIV's width and adjust the child DIV's width to match