ZuoTi.Pro
Question

How to make all the buttons work using javascript? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta...

How to make all the buttons work using javascript?

<!DOCTYPE html>
<html>
    <head>
      
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script>
            function openAccount() {
                /*
                - get the account and initial amount values
                - check that all necessary information is provided
                - call the setCookie function to create account
                */
            }

            function Deposit() {
                /*
                - get the account and amount values
                - check that all necessary information is provided
                - alter cookie with current amount of deposit
                */
            }

            function Withdraw() {
                /*
                - get the account and amount values
                - check that all necessary information is provided
                - alter cookie with current amount of withdraw
                */
            }

            function details() {
                var cookievalue = "", str = document.cookie;
                var total_bank = 0;
                var prod_id = 1;
                var cookie_array = str.split(";");
                var x = "<table style='width:100%;' border='1'>";
                x += "<tr><th colspan='3'>Bank Accounts</th></tr>";
                x += "<tr>" +
                        "<th>Account</th>" +
                        "<th>Balance</th>" +
                        "<th>Actions</th>";
                if (document.cookie.length !== 0) {
                    for (var i = 0; i < cookie_array.length; i++)
                    {
                        var B = cookie_array[i].split("=");
                        var Bname = B[0].toString();
                        x += "<tr><td style='width:10;'>" + B[0] + "</td>";
                        x += "<td style='width:10;' align='right'>" + B[1] + "</td>";
                        x += "<td align='center'><input type='button' value='Delete Account " + B[0] + 
                        "' onclick='eraseCookie(\"" + B[0] + "\")'></td>";
                        x += "</tr>";
                        total_bank += parseInt(B[1]);
                    }
                }
                x += "<tr><td></td><td align='right'>" + total_bank + "</td></tr>";
                x += "</table>";
                document.getElementById("accounts").innerHTML = x;
            }

            function eraseCookie(name) {
                alert("Deleting Account: " + name);
                setCookie(name, "", -1)
                details();
            }

            function setCookie(cname, cvalue, exdays) {
                var d = new Date();
                d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
                var expires = "expires=" + d.toUTCString();
                document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
            }

            function getCookie(cname) {
                var name = cname + "=";
                var decodedCookie = decodeURIComponent(document.cookie);
                var ca = decodedCookie.split(';');
                for (var i = 0; i < ca.length; i++) {
                    var c = ca[i];
                    while (c.charAt(0) == ' ') {
                        c = c.substring(1);
                    }
                    if (c.indexOf(name) == 0) {
                        return c.substring(name.length, c.length);
                    }
                }
                return "";
            }
        </script>
    </head>
    <body onload="details()">
        <div style="width:500px; margin:0px auto; background-color:blue; color:white; border:solid black 5px;">
            <div style="text-align:center; background-color:orange; color:black;padding:10px; padding-top:5px; font-size:xx-large;border-bottom:solid black 4px;">BMCC E-BANK</div>

            <table>
                <tr>
                    <td>Account:</td>
                    <td>
                        <input type="text" id="acct">
                    </td>
                </tr>
                <tr>
                    <td>Balance:</td>
                    <td>
                        <input type="text" id="balance">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="Open Account" onclick="openAccount()">
                    </td>
                </tr>

                <tr>
                    <td>Account:</td>
                    <td>
                        <input type="text" id="acct2">
                    </td>
                </tr>
                <tr>
                    <td>Amount:</td>
                    <td>
                        <input type="text" id="amount">
                    </td>
                </tr>

                <tr>
                    <td>

                    </td>
                    <td>
                        <input type="button" value="Deposit" onclick="Deposit()">
                        <input type="button" value="Withdraw" onclick="Withdraw()">
                    </td>
                </tr>
            </table>
            <div id="accounts"></div>
            <table border="1" width="100%">
                <thead>
                    <tr>
                        <th>Account</th>
                        <th>Transaction</th>
                        <th>Previous Balance</th>
                        <th>Amount</th>
                        <th>New Balance</th>
                    </tr>
                </thead>
                <tbody id="transactions"></tbody>
            </table>
        </div>
    </body>
</html>
engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Code:

<!DOCTYPE html>
<html>
<head>
  
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function openAccount() {
var acct=document.getElementById("acct").value; getting values from textbox
              
               var bal=document.getElementById("balance").value;
               setCookie(acct,bal,2); //setcookie with account no. as cookie name and balance as cookie value
               details();
      
      
      
}

function Deposit() {
var acct2=document.getElementById("acct2").value;
               var amt=document.getElementById("amount").value;
               var bal=getCookie(acct2); //getting balance
               bal=Number(bal)+Number(amt); //adding to balance
               setCookie(acct2,bal,2); //again set cookie
               details();
              
      
      
}

function Withdraw() {
var acct2=document.getElementById("acct2").value;
       var amt=document.getElementById("amount").value;
       var bal=getCookie(acct2);
       bal=Number(bal)-Number(amt);
       setCookie(acct2,bal,2);
       details();
}

function details() {
var cookievalue = "", str = document.cookie;
var total_bank = 0;
var prod_id = 1;
var cookie_array = str.split(";");
var x = "<table style='width:100%;' border='1'>";
x += "<tr><th colspan='3'>Bank Accounts</th></tr>";
x += "<tr>" +
"<th>Account</th>" +
"<th>Balance</th>" +
"<th>Actions</th>";
if (document.cookie.length !== 0) {
for (var i = 0; i < cookie_array.length; i++)
{
var B = cookie_array[i].split("=");
var Bname = B[0].toString();
x += "<tr><td style='width:10;'>" + B[0] + "</td>";
x += "<td style='width:10;' align='right'>" + B[1] + "</td>";
x += "<td align='center'><input type='button' value='Delete Account " + B[0] +
"' onclick='eraseCookie(\"" + B[0] + "\")'></td>";
x += "</tr>";
total_bank += parseInt(B[1]);
}
}
x += "<tr><td></td><td align='right'>" + total_bank + "</td></tr>";
x += "</table>";
document.getElementById("accounts").innerHTML = x;
}

function eraseCookie(name) {
alert("Deleting Account: " + name);
setCookie(name, "", -1)
details();
}

function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires=" + d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
</script>
</head>
<body onload="details()">
<div style="width:500px; margin:0px auto; background-color:blue; color:white; border:solid black 5px;">
<div style="text-align:center; background-color:orange; color:black;padding:10px; padding-top:5px; font-size:xx-large;border-bottom:solid black 4px;">BMCC E-BANK</div>

<table>
<tr>
<td>Account:</td>
<td>
<input type="text" id="acct">
</td>
</tr>
<tr>
<td>Balance:</td>
<td>
<input type="text" id="balance">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="Open Account" onclick="openAccount()">
</td>
</tr>

<tr>
<td>Account:</td>
<td>
<input type="text" id="acct2">
</td>
</tr>
<tr>
<td>Amount:</td>
<td>
<input type="text" id="amount">
</td>
</tr>

<tr>
<td>

</td>
<td>
<input type="button" value="Deposit" onclick="Deposit()">
<input type="button" value="Withdraw" onclick="Withdraw()">
</td>
</tr>
</table>
<div id="accounts"></div>
<table border="1" width="100%">
<thead>
<tr>
<th>Account</th>
<th>Transaction</th>
<th>Previous Balance</th>
<th>Amount</th>
<th>New Balance</th>
</tr>
</thead>
<tbody id="transactions"></tbody>
</table>
</div>
</body>
</html>

Output

BMCC E-BANK Account: 543215 Balance: 1000 Open Account Account: 54321 100 Amount: Deposit Withdraw Bank Accounts Account BalaBMCC E-BANK Account: 543215 Balance: 1000 Open Account Account: 54321 1000 Amount: Deposit Withdraw Bank Accounts Balance Act

0 0
Add a comment
Know the answer?
Add Answer to:
How to make all the buttons work using javascript? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • Both codes <!DOCTYPE html> <html> <head> <title>Week 8 Lab - JavaScript DOM and Arrays</title> <meta charset="utf-8">...

    Both codes <!DOCTYPE html> <html> <head> <title>Week 8 Lab - JavaScript DOM and Arrays</title> <meta charset="utf-8"> </head> <body> <h2>Order Form</h2> <form name="orderForm" method="post" action="processForm.html"> <table> <tr> <th colspan="2">Personal Information</th> </tr> <tr> <td>First Name:</td> <td><input type="text" name="firstName" id="firstName" size="30"></td> </tr> <tr> <td>Last Name:</td> <td><input type="text" name="lastName" id="lastName" size="30"></td> </tr> <tr> <td>Address:</td> <td><input type="text" name="address" id="address" size="30"></td> </tr> <tr> <td>City:</td> <td><input type="text" name="city" id="city" size="30"></td> </tr> <tr> <td>Province:</td> <td><select name="province" id="province" size="1"> <option disabled>Select a province</option> <option value="BC">British Columbia</option> <option value="AB">Alberta</option> <option...

  • <!DOCTYPE html> <html> <head> <title>Products</title> <style> .heading { text-align: center; font-size: 40px; } #menu { text-align:...

    <!DOCTYPE html> <html> <head> <title>Products</title> <style> .heading { text-align: center; font-size: 40px; } #menu { text-align: center; } #menu li { display: inline; font-size: 26px; margin-left: 20px; } .container{ overflow: hidden; margin: 30px; } img { float: left; width: 40vh; height: 40vh; margin-left: 10%; } table { float: right; margin-right: 10%; } table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { font-size: 26px; padding: 10px; text-align: left; } a { color: black; } a:visted {...

  • i'm having trouble with 1 and 3 using html, javascript and jquery 1) Change the "Search"...

    i'm having trouble with 1 and 3 using html, javascript and jquery 1) Change the "Search" link on the left to a button that when clicked, hide all the fields on the form and display the text "This is a search feature..." 3) When the user fills the form and clicks "Login", the values inputted should be displayed in the empty row (under Login) of the page. The display should be in the form: Student ID: <input value> Student Name:...

  • This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" />...

    This is my code so far: <!DOCTYPE html> <html> <head> <title>JavaScript is fun</title> <meta charset="utf-8" /> </head> <body> <script type ="text/javascript"> //declare a variable and store text in it var x = "JavaScript is fun"; //write the variable 5 times document.write(x + x + x + x + x); //store 5 as string in variable x x = "5"; //store 3 as string in variable y var y = "3"; //write the value x + y to the document document.write("<br>");...

  • HTML Coding <html> <head> <title> Contact -- Charles Robertson </title> </head> <body bgcolor="white"> <table width="700" height="500"...

    HTML Coding <html> <head> <title> Contact -- Charles Robertson </title> </head> <body bgcolor="white"> <table width="700" height="500" border="10"> <!-----row---1----logo---> <tr><td> <img src="20150516_084745" width="700" height="200"> </td></tr> <!-----row-2-navigation-----> <tr><td> <!----start-navigation-table----> <table width="700" height="100" border="5" bgcolor="lightgreen" > <tr><td><a href="HerbFarm.html"> <center> HOME </center></a></td> <td><a href="about3.html"> <center> ABOUT </center></a></td> <td><a href="contact3.html"> <center> CONTACT </center></a></td> <td><a href="gallery3.html"> <center> GALLERY </center></a></td> </tr> </table> <!------end-navigation-table----> </td></tr> <tr><td> <h1>Contact </h1> <form action="thankyou.html">    </form> <div class="row"> <div class="col-75"> <div class="container"> <form action="/action_page.php"> <div class="row"> <div class="col-50"> <h3>Billing Address</h3> <label for="fname"><i...

  • <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Da...

    <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 4 Hands-on Project 4-3 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Hands-on Project 4-3</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 4-3 </h1> </header> <article> <div id="results"> <p id="resultsExpl"></p> <ul> <li id="item1"></li> <li id="item2"></li> <li id="item3"></li> <li id="item4"></li> <li id="item5"></li> </ul> </div> <form> <fieldset> <label for="placeBox" id="placeLabel"> Type the name of a place, then click Submit: </label> <input type="text" id="placeBox"...

  • in the following java script code follow the instructions provided <!DOCTYPE html> <html> <head> <!-- JavaScript...

    in the following java script code follow the instructions provided <!DOCTYPE html> <html> <head> <!-- JavaScript 6th Edition Chapter 5 Hands-on Project 5-2 Author: Date:    Filename: index.htm --> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hands-on Project 5-2</title> <link rel="stylesheet" href="styles.css" /> <script src="modernizr.custom.05819.js"></script> </head> <body> <header> <h1> Hands-on Project 5-2 </h1> </header> <article> <h2>Change of address form</h2> <form> <fieldset id="contactinfo"> <label for="addrinput"> Street Address </label> <input type="text" id="addrinput" name="Address" /> <label for="cityinput"> City </label> <input type="text" id="cityinput" name="City"...

  • Hello Ive been tryting to add the CDN of jquery to my html code and I...

    Hello Ive been tryting to add the CDN of jquery to my html code and I keep getting an error Need help with this : ​​ Navigate to www.code.jquery.com in your Chrome browser. On this page, you'll find different stable versions of jQuery. Select uncompressed for jQuery Core 3.3.1. Copy the <script> tag that is given to you. In store_hours.html, paste that tag directly above your body's closing tag. This is the jQuery CDN. After you paste this code into...

  • Javascript to edit a HTML file. Where to begin? <!doctype html> <html>    <head>      <meta charset="utf-8">      <title>TODO:...

    Javascript to edit a HTML file. Where to begin? <!doctype html> <html>    <head>      <meta charset="utf-8">      <title>TODO: Change The Title</title>    </head>    <body>      <h1></h1>      <p>First paragraph.</p>      <p class="intro">Second <span>paragraph</span>.</p>      <button id="start">Start</button>      <main> </main>      <!--       Test 6: DOM Programming       You MAY consult the notes for week 7, but you MAY NOT discuss this test or       your code with any other students.  All work must be your own.       Instructions:              1. Put all solution code in a file named solution.js.  When you upload your          solution to...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT