Displaying user input in the table form using Javascript DOM - javascript

i have trouble displaying users' input and have spent some time looking at it and unsure which part had gone wrong. I am supposed to display the "Result" word in green and display user's input in a form of table. I used document.getElementsByClassName('container').innerHTML to add new element in the homepage.
Could anyone explain why the word Result and table doesn't show?
My code:
/*** Home ***/
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="mhsavings.js"></script>
</head>
<style>
.main-content{
width:70%;
/* background-color: lightblue; */
text-align: center;
}
</style>
<body>
<div class="container main-content">
<h1 style="margin-top:40px; margin-bottom: 30px;">Savings</h1>
<h3 style="color:blue;margin-bottom:48px;">How long does it takes for me to reach My Goal?</h3>
<form>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon1">Initial Amount ($)</span>
<input type="text" class="form-control" placeholder="" aria-label="initial Amt" aria-describedby="basic-addon1" id="initialAmt">
</div>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon2">Yearly interest (%)</span>
<input type="text" class="form-control" aria-label="yearly interest" aria-describedby="basic-addon2" id="yearlyInt">
</div>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon3">My Goal</span>
<input type="text" class="form-control" id="goal" aria-describedby="basic-addon3" id="goal">
</div>
<button type="button" class="btn btn-danger" style="margin-top:30px"; id="calc" onclick="calculate()">Calculate</button>
</form>
</div>
</body>
</html>
/*** in JS file ***/
function calculate(){
'use stict';
var initialAmt = document.getElementById("initialAmt");
var yearlyInt = document.getElementById("yearlyInt");
var goal = document.getElementById("goal");
console.log(goal.value);
var receive = Math.round(initialAmt, 2);
var years = 0;
while (receive < goal) {
receive *= (1 + yearlyInt);
years += 1;
}
// console.log(document.getElementsByClassName('container'));
document.getElementsByClassName('container').innerHTML = "<h3 style='color:green; margin-bottom: 20px'>Result</h3>";
document.getElementsByClassName('container').innerHTML = `<table style='width: 500px'>
<tr>
<th>You will achieve your goal in (years):</th>
<td>${years}</td>
</tr>
<tr>
<th>You will get ($):</th>
<td>${receive}</td>
</tr>
</table>`;
}

#1: name of function not the function execution!
<button type="button" class="btn btn-danger" style="margin-top:30px"; id="calc" onclick="calculate()">Calculate</button>
to
<button type="button" class="btn btn-danger" style="margin-top:30px"; id="calc" onclick="calculate">Calculate</button>
#2: getElementsByClassName returns a collection not an element!
#3: lacking of parseInt before calculating

Beside the comments from other user posted in your original question,you code has many incorrect points:
You need to use value to get the input value,so change var initialAmt = document.getElementById("initialAmt"); to var initialAmt = document.getElementById("initialAmt").value;
When use innerHTML,you need to append the value,make sure not to override it
function calculate(){
'use stict';
var initialAmt = parseInt(document.getElementById("initialAmt").value);
var yearlyInt = parseInt(document.getElementById("yearlyInt").value);
var goal = parseInt(document.getElementById("goal").value);
var receive = Math.round(initialAmt, 2);
var years = 0;
while (receive < goal) {
receive *= (1 + yearlyInt);
years += 1;
}
// console.log(document.getElementsByClassName('container'));
var result = document.createElement("div");
var content = "<h3 style='color:green; margin-bottom: 20px'>Result</h3>";
content += `<table style='width: 500px;border:1px'>
<tr>
<th>You will achieve your goal in (years):</th>
<td>`+years+`</td>
</tr>
<tr>
<th>You will get ($):</th>
<td>`+receive+`</td>
</tr>
</table>`;
result.innerHTML = content;
document.getElementsByClassName('container')[0].appendChild(result);
}
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="mhsavings.js"></script>
</head>
<style>
.main-content{
width:70%;
/* background-color: lightblue; */
text-align: center;
}
</style>
<body>
<div class="container main-content">
<h1 style="margin-top:40px; margin-bottom: 30px;">Savings</h1>
<h3 style="color:blue;margin-bottom:48px;">How long does it takes for me to reach My Goal?</h3>
<form>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon1">Initial Amount ($)</span>
<input type="text" class="form-control" placeholder="" aria-label="initial Amt" aria-describedby="basic-addon1" id="initialAmt">
</div>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon2">Yearly interest (%)</span>
<input type="text" class="form-control" aria-label="yearly interest" aria-describedby="basic-addon2" id="yearlyInt">
</div>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon3">My Goal</span>
<input type="text" class="form-control" id="goal" aria-describedby="basic-addon3" id="goal">
</div>
<button type="button" class="btn btn-danger" style="margin-top:30px"; id="calc" onclick="calculate()">Calculate</button>
</form>
</div>
</body>
</html>

Using your functio, you may use this code
form fields are text fields. With parseInt() a text string is converted into an integer.
Below I added an extra <div id="result"></div> but if you want to use the container div, you can target this div with document.querySelector(".container").innerHTML = .... This will select the first class with that name. Note that this will replace all html code in the form!
function calculate(){
'use stict';
let initialAmt = parseInt( document.getElementById("initialAmt").value );
let yearlyInt = parseInt( document.getElementById("yearlyInt").value );
let goal = parseInt( document.getElementById("goal").value );
let receive = Math.round(initialAmt, 2);
let years = 0;
while (receive < goal) {
receive *= (1 + yearlyInt);
years += 1;
}
let result = '<h3 style="color:green; margin-bottom: 20px">Result</h3><table style="width: 500px"><tr><th>You will achieve your goal in (years):</th><td>' + years + '</td></tr><tr><th>You will get ($):</th><td>' + receive + '</td></tr></table>';
document.getElementById("result").innerHTML = result;
}
.main-content{
width:70%;
/* background-color: lightblue; */
text-align: center;
}
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="container main-content">
<h1 style="margin-top:40px; margin-bottom: 30px;">Savings</h1>
<h3 style="color:blue;margin-bottom:48px;">How long does it takes for me to reach My Goal?</h3>
<form>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon1">Initial Amount ($)</span>
<input type="text" class="form-control" placeholder="" aria-label="initial Amt" aria-describedby="basic-addon1" id="initialAmt">
</div>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon2">Yearly interest (%)</span>
<input type="text" class="form-control" aria-label="yearly interest" aria-describedby="basic-addon2" id="yearlyInt">
</div>
<div class="input-group" style='margin-bottom: 16px;'>
<span class="input-group-text" id="basic-addon3">My Goal</span>
<input type="text" class="form-control" id="goal" aria-describedby="basic-addon3" id="goal">
</div>
<button type="button" class="btn btn-danger" style="margin-top:30px"; id="calc" onclick="calculate()">Calculate</button>
</form>
<div id="result"></div>
</div>

Related

ASCII translator on input

I don't understand about cesar cipher, how it's works, trying to solve this for my homework, but nothing come in my mind. I tried this code, but there's no return on input.
i already maded everything, but the only things that miss in this work is making char code work on a input
const button = document.getElementById("button")
const input = document.getElementById("input").value;
button.onclick = function() {
var texto = input2.charCodeAt().value
input.innerHTML = texto;
}
<h1>ASCII</h1>
<button onclick="myFunction()" type="button" class="btn btn-dark">Coding</button>
<div class="input-group input-group-sm mb-3">
<span class="input-group-text" id="inputGroup-sizing-sm">Say it</span>
<input id="id1" type="text" class="form-control" name="text1" maxLength="1">
</div>
<p id="demo" style="color:red;"></p>
I did it, there was a problem not only with DOM, but also with textarea, idk how to make a input as a output for put the char code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Working ASCII</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<style>
body {
background-color: black;
}
</style>
</head>
<body>
<h1>ASCII</h1>
<button id="button" type="button" class="btn btn-dark">Coding</button>
<div class="input-group input-group-sm mb-3">
<input id="input" type="text" class="form-control" name="text1" maxLength="1">
<div class="form-group">
<br>
<label for="exampleFormControlTextarea1">ASCII CODE</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
<script>
const button = document.getElementById("button")
button.onclick = function() {
alert("ASCII")
var str = document.getElementById("input");
if (str.value=="") {
str.focus();
return;
}
document.getElementById("exampleFormControlTextarea1").innerText = str.value.charCodeAt(0);
}
</script>
</body>
</html>

how I validate JavaScript

Here when multiplying -1 to any variable it turns to negative. It uses for when the balance is withdrawn balance decreases but I set if the condition for validation for this reason -1 does not work. how I validate properly and balance also decreases when
<!doctype html>
<html lang="en">
<head>
<title>Bank || Project</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- css link -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="login-area" class="login-area">
<h1 class="bank-title">Welcome To Pioneer Bank</h1>
<div class="submit-area">
<h4>Login</h4>
<input type="text" class="form-control" placeholder="Email...">
<br>
<input type="password" class="form-control" placeholder="Password...">
<br>
<button type="submit" id="login-btn" class="btn btn-success">Submit</button>
</div>
</div>
<div id="transaction-area">
<div class="row">
<div class="col-md-4">
<div class=" deposit status">
<h5>Deposit</h5>
<h2>$ <span id="current-deposit">00</span></h2>
</div>
</div>
<div class="col-md-4 my-2 my-md-0">
<div class=" withdraw status">
<h5>Withdraw</h5>
<h2>$ <span id="current-withdraw">00</span></h2>
</div>
</div>
<div class="col-md-4">
<div class=" balance status">
<h5>Balance</h5>
<h2>$ <span id="current-balance">1240</span></h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="submit-area">
<h4>Deposit</h4>
<input type="text" id="deposit-amount" class="form-control" placeholder="$ amount you want to deposit">
<br>
<button id="deposit-btn" class="btn btn-success">Deposit</button>
</div>
</div>
<div class="col-md-6">
<div class="submit-area">
<h4>Withdraw</h4>
<input type="text" id="withdraw-amount" class="form-control" placeholder="$ amount you want to withdraw">
<br>
<button id="withdraw-btn" class="btn btn-success">Withdraw</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
Here when multiplying -1 to any variable it turns to negative. It uses for when the balance is
withdrawn balance decreases but I set if the condition for validation for this reason -1 does not
ork. how I validate properly and balance also decreases when
// LOGIN BUTTON EVENT HANDLER
const loginBtn = document.getElementById('login-btn');
loginBtn.addEventListener('click', function () {
const loginArea = document.getElementById('login-area');
loginArea.style.display = 'none';
const transactionArea = document.getElementById('transaction-area');
transactionArea.style.display = 'block';
})
//deposit handler
const depositBtn = document.getElementById('deposit-btn');
depositBtn.addEventListener('click', function() {
const depositNumber = getInputNumber("deposit-amount");
updateSpanText("current-deposit", depositNumber)
updateSpanText("current-balance", depositNumber);
})
// withdraw button handler
const withdrawBtn = document.getElementById("withdraw-btn");
withdrawBtn.addEventListener("click", function() {
const withdrawNumber = getInputNumber("withdraw-amount");
updateSpanText("current-withdraw", withdrawNumber);
updateSpanText("current-balance", withdrawNumber;
})
function getInputNumber(id) {
const amount = document.getElementById(id).value;
const amountNumber = parseFloat(amount);
document.getElementById(id).value = "";
return amountNumber;
}
Here when multiplying -1 to any variable it turns to negative. It uses for when the balance
is withdrawn balance decreases but I set if the condition for validation for this reason -1 does
not work. how I validate properly and balance also decreases when
function updateSpanText(id, depositNumber) {
if (depositNumber >= 0 && depositNumber !== '') { //here I set if condtition
var currentBalance = document.getElementById(id).innerText;
const currentBalanceNumber = parseFloat(currentBalance);
const totalBalance = depositNumber + currentBalanceNumber;
document.getElementById(id).innerText = totalBalance;
} else {
console.log(alert('Invalid input value'));
}
</script>
withdraw.
Here is what you want:
// LOGIN BUTTON EVENT HANDLER
const loginBtn = document.getElementById('login-btn');
loginBtn.addEventListener('click', function () {
const loginArea = document.getElementById('login-area');
loginArea.style.display = 'none';
const transactionArea = document.getElementById('transaction-area');
transactionArea.style.display = 'block';
})
//deposit handler
const depositBtn = document.getElementById('deposit-btn');
depositBtn.addEventListener('click', function () {
const depositNumber = getInputNumber("deposit-amount");
updateSpanText("current-deposit", depositNumber)
updateSpanText("current-balance", depositNumber);
})
// withdraw button handler
const withdrawBtn = document.getElementById("withdraw-btn");
withdrawBtn.addEventListener("click", function () {
const withdrawNumber = getInputNumber("withdraw-amount");
updateSpanText("current-withdraw", withdrawNumber);
updateSpanText("current-balance", withdrawNumber, true);
})
function getInputNumber(id) {
const amount = document.getElementById(id).value;
const amountNumber = parseFloat(amount);
document.getElementById(id).value = "";
return amountNumber;
}
function updateSpanText(id, depositNumber, isWithdraw = false) {
if (depositNumber >= 0 && depositNumber !== '') { //here I set if condtition
var currentBalance = document.getElementById(id).innerText;
const currentBalanceNumber = parseFloat(currentBalance);
const totalBalance = currentBalanceNumber + (isWithdraw ? -depositNumber : depositNumber);
document.getElementById(id).innerText = totalBalance;
} else {
console.log(alert('Invalid input value'));
}
}
<!doctype html>
<html lang="en">
<head>
<title>Bank || Project</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- css link -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="login-area" class="login-area">
<h1 class="bank-title">Welcome To Pioneer Bank</h1>
<div class="submit-area">
<h4>Login</h4>
<input type="text" class="form-control" placeholder="Email...">
<br>
<input type="password" class="form-control" placeholder="Password...">
<br>
<button type="submit" id="login-btn" class="btn btn-success">Submit</button>
</div>
</div>
<div id="transaction-area">
<div class="row">
<div class="col-md-4">
<div class=" deposit status">
<h5>Deposit</h5>
<h2>$ <span id="current-deposit">00</span></h2>
</div>
</div>
<div class="col-md-4 my-2 my-md-0">
<div class=" withdraw status">
<h5>Withdraw</h5>
<h2>$ <span id="current-withdraw">00</span></h2>
</div>
</div>
<div class="col-md-4">
<div class=" balance status">
<h5>Balance</h5>
<h2>$ <span id="current-balance">1240</span></h2>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="submit-area">
<h4>Deposit</h4>
<input type="text" id="deposit-amount" class="form-control"
placeholder="$ amount you want to deposit">
<br>
<button id="deposit-btn" class="btn btn-success">Deposit</button>
</div>
</div>
<div class="col-md-6">
<div class="submit-area">
<h4>Withdraw</h4>
<input type="text" id="withdraw-amount" class="form-control"
placeholder="$ amount you want to withdraw">
<br>
<button id="withdraw-btn" class="btn btn-success">Withdraw</button>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

JavaScript to perform a simple calculation on the click of a button and put result in text box

I am trying to have some JavaScript activate when I click a button.
The action is for a simple calculation to appear in a text box.
This is what I have got so far, but it's not working currently:
function to_mjd() {
var number;
number = 5 + 7;
document.getElementById("mjd").value = number;
}
<input id="mjd" class="textbox2" type="text" name="mjd" placeholder="NNNNN" maxlength="5">
<input type="submit" onclick="to_mjd();" value="CONVERT">
Can anyone point where I'm going wrong please?
I am editing my original post to add the entirety of the html and the javascript code. Hopefully this will help.
ENTIRE HTML:
<!DOCTYPE html>
<html>
<head>
<title>Converter</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<!-- <link rel="shortcut icon" href="favicon.ico" > -->
</head>
<body>
<div class="band1">
<center>
<h1>CONVERTER</h1>
</center>
</div>
<div id ="band" class="band2">
<center>
<form>
<span class="span1">
<span class="date">
Year:<br><br>
<input class="textbox1" type="text" name="year" placeholder="yyyy" maxlength="4">
</span>
<span class="date">
Month:<br><br>
<input class="textbox1" type="text" name="month" placeholder="mm" maxlength="2">
</span>
<span class="date">
Day:<br><br>
<input class="textbox1" type="text" name="day" placeholder="dd" maxlength="2">
</span>
</span>
<span class="span2">
<input type="button" onclick="to_mjd();" value="CONVERT">
</span>
<span class="span3">
MJD:<br><br>
<input id="mjd" class="textbox2" type="text" name="mjd" placeholder="NNNNN" maxlength="5">
</span>
</form>
</center>
</div>
<script src="https://rawgit.com/bgrins/TinyColor/master/tinycolor.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>
ENTIRE JAVASCRIPT:
$(document).ready(function(){
var color = '#'+('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6);
document.getElementById("band").style.background = color;
var c = tinycolor(color);
if (c.isDark())
document.getElementById("band").style.color = "#FFFFFF";
else
document.getElementById("band").style.color = "#000000";
function to_mjd() {
var number;
number = 5+7;
document.getElementById("mjd").value = number;
}
});
to_mjd is a local function and button can not see it.
Simply change function location in your js file:
$(document).ready(function(){
var color = '#'+('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6);
document.getElementById("band").style.background = color;
var c = tinycolor(color);
if (c.isDark())
document.getElementById("band").style.color = "#FFFFFF";
else
document.getElementById("band").style.color = "#000000";
});
var to_mjd = function() {
var number;
number = 5+7;
document.getElementById("mjd").value = number;
}
I will suggest to use input type='button' to replace input type='submit'
Check this
function to_mjd() {
var number;
number = 5 + 7;
document.getElementById("mjd").value = number;
}
<input id="mjd" class="textbox2" type="text" name="mjd" placeholder="NNNNN" maxlength="5">
<input type="button" onclick="to_mjd();" value="CONVERT">
<!DOCTYPE html>
<html>
<head>
<title>Converter</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://rawgit.com/bgrins/TinyColor/master/tinycolor.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var color = '#'+('000000' + (Math.random()*0xFFFFFF<<0).toString(16)).slice(-6);
document.getElementById("band").style.background = color;
var c = tinycolor(color);
if (c.isDark())
document.getElementById("band").style.color = "#FFFFFF";
else
document.getElementById("band").style.color = "#000000";
});
function to_mjd() {
var number;
number = 5+7;
document.getElementById("mjd").value = number;
}
</script>
</head>
<body>
<div class="band1">
<center>
<h1>CONVERTER</h1>
</center>
</div>
<div id ="band" class="band2">
<center>
<form>
<span class="span1">
<span class="date">
Year:<br><br>
<input class="textbox1" type="text" name="year" placeholder="yyyy" maxlength="4">
</span>
<span class="date">
Month:<br><br>
<input class="textbox1" type="text" name="month" placeholder="mm" maxlength="2">
</span>
<span class="date">
Day:<br><br>
<input class="textbox1" type="text" name="day" placeholder="dd" maxlength="2">
</span>
</span>
<span class="span2">
<input type="button" onclick="to_mjd();" value="CONVERT">
</span>
<span class="span3">
MJD:<br><br>
<input id="mjd" class="textbox2" type="text" name="mjd" placeholder="NNNNN" maxlength="5">
</span>
</form>
</center>
</div>
</body>
</html>
If you're trying to just add 5+7, that code should work, but if you're trying to get the values dynamically, you could go at least a couple routes. The simplest is:
<input type=text onclick="this.value = eval(this.value)" />
The first click will return undefined. Backspace through that and type 5+7. Click again. Returns 12.
You could elaborate on that like so:
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<input type=text id=input />
<button type=button onclick='output.value += eval(input.value)+"\n";'> = </button>
<textarea id=output></textarea>
<style>
body{ width: 99vw; height: 99vh; }
#input{ width: 90%; }
#output{ height: 90%; width: 99%; }
</style>
<script>
var input = document.getElementById('input');
var output = document.getElementById('output');
</script>
</body>

Javascript in HTML forms, Accumulating Total Realtime

I have a bit of a problem with my HTML and JAVASCRIPT Combination.
I'm trying to create a page where I am able to add values by a certain parameter. It's it in this picture of how it would work.
The whole page:
Here's my code to this overall HTML Page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Naawan Receipt System</title>
<link rel="stylesheet" href="static/header-second-bar.css">
<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
</head>
<body>
<header class="header-two-bars">
<div class="header-first-bar">
<div class="header-limiter">
<h1>Municipality<span>Receipt</span></h1>
<nav>
FORM
LOGS
QUERY
USER
</nav>
Logout
</div>
</div>
<div class="header-second-bar">
<div class="header-limiter">
<h2>User: {{ user }}</h2>
<nav>
<i class="fa fa-comments-o"></i> Nature of Collection
<i class="fa fa-file-text"></i> Results
<i class="fa fa-group"></i> Participants
<i class="fa fa-cogs"></i> Settings
</nav>
</div>
</div>
</header>
<!-- CONTENT HERE. -->
<link rel="stylesheet" href="static/indextest.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="static/indextest.css">
<link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
<div class="jumbotron jumbotron-sm">
<div class="container" id = "contact">
<div class="row">
<div class="col-sm-12 col-lg-12">
<h1 class="h1">
Accountable Form 51 <small>Made easier</small></h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12" style="display: inline-block;">
<div class="well well-sm">
<form>
<div class="row">
<div class="col-md-6" style="display: inline-block; ">
<div class="form-group">
<label for="name">
O.R Number</label>
<input type="text" class="form-control" id="name" placeholder="Enter O.R Number" required="required" />
</div>
<div class="form-group">
<label for="email">
Payor</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="text" class="form-control" name = "payor" id="payor" placeholder="Enter Full Name" required="required" /></div>
</div>
<div class="form-group">
<label for="subject">
Nature of Payment</label>
<div id="RadioGroup">
<br>
<input type="radio" name="paymentmethod" checked="checked" value="CASH"> Cash<br>
<input type="radio" name="paymentmethod" value="CHECK"> Check<br>
<div id="PaymentsCHECK" class="desc" style="display: none;">
<br>
Drawee Bank<input type="text" name="dbank">
Number<input type="text" name="dNum">
Date<input type="text" name="dDate">
</div>
<input type="radio" name="paymentmethod" value="MONEY"> Money Order<br>
<div id="PaymentsMONEY" class="desc" style="display: none;">
<br>
<input type="text" name="dbank">Money Order No.
</div>
</div>
</div> <!-- FORM GROUP END -->
<div class="form-group">
<label for="name">
Memo</label>
<textarea name="message" id="message" class="form-control" rows="5" cols="25" required="required"
placeholder="Message"></textarea>
</div>
</div><!-- FIRST COL6 END -->
</div><br><br><br><br><!-- ROW END -->
<div class="col-md-5" style="display: inline-block; ">
<div class="jumbotron">
<h2>Type in Nature of Collection...</h2>
<form>
<input class="form-control input-lg" id="form" list="languages" placeholder="Search" type="text" required>
<br>
<input class="form-control input-lg" id="amount" list="languages" placeholder="Amount" type="number" required>
<br>
<button onclick="addRow(); return false;">Add Item</button>
</form>
<datalist id="languages">
{% for row in rows %}
<option value = "{{row[0]}}">
{% endfor %}
</datalist>
</div> <!-- JUMBO END -->
<h6> <label>Date:<span></span>
</label> {{date}}</h6>
<h3><fieldset disabled>
<label>Total </label>
<input type = "text" name = "total" id="total"><br></p>
</fieldset></h3>
</div><!-- COL5 END -->
<!-- </div> --><!-- REMAIN OR NOT? DEPENDS ON DEBUG PROCESS LATER -->
<div class="col-md-6" style="display: inline-block;">
<div class="jumbotron">
<h2>Nature of Collection</h2>
</div>
<div>
<!-- ACCUMULATION TABLE STARTS -->
<table id="datatable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<tr>
</tr>
<tbody>
</tbody>
</table>
<!-- </form> --> <!-- CHECK LATER -->
<datalist id="languages">
{% for row in rows %}
<option value={{row[0]}}></option>
{% endfor %}
</datalist>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-primary pull-right" id="btnContactUs">
Submit Form</button>
<br>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript">
/*EDIT HERE LATER*/
$(document).ready(function() {
$("input[name$='paymentmethod']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#Payments" + test).show();
});
});
</script>
<script type="text/javascript">
function deleteRow(o){
var p=o.parentNode.parentNode;
p.parentNode.removeChild(p);
}
function addRow()
{
var table = document.getElementById("datatable"),
newRow = table.insertRow(table.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
name = document.getElementById("form").value,
amount = document.getElementById("amount").value;
delete1 = delete1 = '<input type="button" class="btn btn-danger" class="glyphicon glyphicon-trash"id="delete" value="Delete" onclick="deleteRow(this)">';
cell1.innerHTML = name;
cell2.innerHTML = amount;
cell3.innerHTML = delete1;
}
</script>
<script type="text/javascript">
function findTotal(){
var arr = document.getElementsByName('qty');
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total').value = tot;
}
</script>
</body>
</html>
So I am done in that part, this time I wanted to add the values of each amount added and display it real-time on the Total inputbox. So I put an id to the cell which the amounts will be generate in the javascript:
Before:
function addRow()
{
var table = document.getElementById("datatable"),
newRow = table.insertRow(table.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
name = document.getElementById("form").value,
amount = document.getElementById("amount").value;
delete1 = delete1 = '<input type="button" class="btn btn-danger" class="glyphicon glyphicon-trash"id="delete" value="Delete" onclick="deleteRow(this)">';
cell1.innerHTML = name;
cell2.innerHTML = amount;
cell3.innerHTML = delete1;
}
After:
function addRow()
{
var table = document.getElementById("datatable"),
newRow = table.insertRow(table.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
name = document.getElementById("form").value,
amount = document.getElementById("amount").value;
delete1 = delete1 = '<input type="button" class="btn btn-danger" class="glyphicon glyphicon-trash"id="delete" value="Delete" onclick="deleteRow(this)">';
cell1.innerHTML = name;
cell2.innerHTML = amount;
cell2.id = "qty
cell3.innerHTML = delete1;
}
"qty" here will match the ID's of all entry on cell 2 and will add it and will display it on the id total.
But when I do this the value box at the top side pops out an error:
It prompts me to enter a value on the unrelated boxes.
I also tried separating them by forms but it didn't work.
I tried this on the other forms I have and its working, I was just using a checkbox plus textbox, however on this page I am unable to do it. What should I do on this case?
A checklist just to be clear:
I generated ID's for each cell added
I used that ID to evaluate on a javascript script
The accumulated total was supposed to go to the ID "total" but it didn't happen.
I already tried separating the forms, but this time it only reloaded and the entries weren't added.
I have a separate button for saving all fields named "Submit Form"
Any input or ways how to do this in your opinion?
The reason you're getting this error is due to nested forms, which are not a constructed supported by browsers. Make sure you close your first form before starting the new one - then validation won't cross-contaminate.
To be clear, this has nothing to do with the way you're totalling your values (though that has some issues to be resolved on its own, e.g. you're accessing the value of your elements, while you've never set it - instead you want to be getting their innerHtml).

how to toggle between two html pages by clicking on links

I have three html pages separately
homepage (with two links (sign up) and (sign in) )
sign-in
sign-up
I want to hide the other page, when one page is shown only.
homepage.jsp
<!DOCTYPE html>
<script type="text/javascript">
function showhide(id) {
var e = document.getElementById(id);
e.style.display = (e.style.display == 'block') ? 'none' : 'block';
}
</script>
<!-- write your code here -->
<div>
Create account
Sign In
</div>
<div>
<nav>
<div id="in" style="display: none;">
<jsp:include page="sign-in.jsp"></jsp:include>
</div>
</nav>
<nav>
<div id="join" style="display: none;">
<jsp:include page="sign-up.jsp"></jsp:include>
</div>
</nav>
</div>
<!-- write your code here -->
sign-in.jsp
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Laar Project Store </title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- write your code here -->
<div style="margin: 50px;">
<div class = "input-group input-group-xs" role = "group">
<form>
<table>
<div class = "input-group input-group-xs">
<tr>
<td style="align: right; width: 100px;"><span class="input-group-addon">Email</span></td>
<td><input type="email" class="form-control" name="email" placeholder="Email" required/></td>
</tr>
</div>
<div class = "input-group input-group-xs">
<tr>
<td style="align: right; width: 100px;"><span class="input-group-addon">Password</span></td>
<td><input type="password" class="form-control" name="password" placeholder="Password" required/></td>
</tr>
</div>
<div class = "input-group input-group-xs">
<tr>
<td></td>
<td><input type="submit" class="btn btn-success btn-xs" value = "Sign In" style="margin-top: 10px; margin-bottom: 10px;"/></td>
</tr>
</div>
</table>
</form>
</div>
</div>
<!-- write your code here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
sign-up.jsp
<!DOCTYPE html>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Laar Project Store </title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- write your code here -->
<div style="margin: 50px;">
<div class = "input-group input-group-xs" role = "group">
<form>
<table>
<div class = "input-group input-group-xs">
<tr>
<td style="align: right; width: 100px;"><span class="input-group-addon">Email</span></td>
<td><input type="email" class="form-control" name="email" placeholder="Email" required/></td>
</tr>
</div>
<div class = "input-group input-group-xs">
<tr>
<td style="align: right; width: 100px;"><span class="input-group-addon">Password</span></td>
<td><input type="password" class="form-control" name="password" placeholder="Password" required/></td>
</tr>
</div>
<div class = "input-group input-group-xs">
<tr>
<td></td>
<td><input type="submit" class="btn btn-success btn-xs" value = "Sign In" style="margin-top: 10px; margin-bottom: 10px;"/></td>
</tr>
</div>
</table>
</form>
</div>
</div>
<!-- write your code here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
I want to know that how do i hide the other page when the one page is shown.
Please help. I am waiting for your kind response.
I assume that you handle which submit button is clicked. So give an id to your page's outmost div. An you can manage your pages as follows:
$(function () {
$('#homepageDivId').show();
$('#signInPageId').hide();
$('#signOutPageId').hide();
$('#signInPageId input[type=button]').click(function() {
$('#homepageDivId').hide();
$('#signOutPageId').hide();
$('#signInPageId').show();
});
$('#signOutPageId input[type=button]').click(function() {
$('#signInPageId').hide();
$('#homepageDivId').hide();
$('#signOutPageId').show();
});
$('#homepageDivId input[type=button]').click(function() {
$('#signInPageId').hide();
$('#signOutPageId').hide();
$('#homepageDivId').show();
});
});

Categories