Reputation: 31

Html and JavaScript result flash and goes of immediately what could be the problem

Html

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <body>
        <h1> Welcome to Benjamin's bank. Have some Money</h1>
        <p>Please enter your name, password and the amount you want to withdraw</p>
        <form action="" method="post">
            <input type="text" value="name" id="name"><br>
            <input type="password" value="password" id="password"><br>
            <input type="text" value="amount" id="amount"><br>
            <button onclick="withdraw()">click me</button>
        </form>
        <p id="para"></p>
        
        <script src="Beginners_bank.js" async defer></script>
    </body>
</html>

Javascript

    function withdraw(){
    var namevar= document.getElementById("name").value;
    var passwordvar=document.getElementById("password").value;
    var amountvar=document.getElementById("amount").value;
    var Amount=3000;
    var name="Benjamin Anoruo";
    var pass="testing123";
    var n=Amount-amountvar;
    if(namevar==name && passwordvar==pass ){
        if(amountvar<=Amount){
            document.getElementById("para").innerHTML="your withdrawal was successful. your new balance is:"+n;
            document.body.style.backgroundColor='green';
        }
    }
}

This code is supposed to take users name password and amount they want to withdraw.anytime I enter every detail and click the button it just flashes the output and return an empty form Please how can I fix this issue.

Upvotes: 0