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 >
<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 style='margin-bottom: 16px;'>
<span id="basic-addon1">Initial Amount ($)</span>
<input type="text" placeholder="" aria-label="initial Amt" aria-describedby="basic-addon1" id="initialAmt">
</div>
<div style='margin-bottom: 16px;'>
<span id="basic-addon2">Yearly interest (%)</span>
<input type="text" aria-label="yearly interest" aria-describedby="basic-addon2" id="yearlyInt">
</div>
<div style='margin-bottom: 16px;'>
<span id="basic-addon3">My Goal</span>
<input type="text" id="goal" aria-describedby="basic-addon3" id="goal">
</div>
<button type="button" 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>`;
}
CodePudding user response：
#1: name of function not the function execution!
<button type="button" style="margin-top:30px"; id="calc" onclick="calculate()">Calculate</button>
to
<button type="button" style="margin-top:30px"; id="calc" onclick="calculate">Calculate</button>
#2: getElementsByClassName returns a collection not an element!
#3: lacking of parseInt before calculating
CodePudding user response：
Beside the comments from other user posted in your original question,you code has many incorrect points:
- You need to use
valueto get the input value,so change varinitialAmt = document.getElementById("initialAmt");tovar 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 >
<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 style='margin-bottom: 16px;'>
<span id="basic-addon1">Initial Amount ($)</span>
<input type="text" placeholder="" aria-label="initial Amt" aria-describedby="basic-addon1" id="initialAmt">
</div>
<div style='margin-bottom: 16px;'>
<span id="basic-addon2">Yearly interest (%)</span>
<input type="text" aria-label="yearly interest" aria-describedby="basic-addon2" id="yearlyInt">
</div>
<div style='margin-bottom: 16px;'>
<span id="basic-addon3">My Goal</span>
<input type="text" id="goal" aria-describedby="basic-addon3" id="goal">
</div>
<button type="button" style="margin-top:30px"; id="calc" onclick="calculate()">Calculate</button>
</form>
</div>
</body>
</html>CodePudding user response：
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 withdocument.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 >
<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 style='margin-bottom: 16px;'>
<span id="basic-addon1">Initial Amount ($)</span>
<input type="text" placeholder="" aria-label="initial Amt" aria-describedby="basic-addon1" id="initialAmt">
</div>
<div style='margin-bottom: 16px;'>
<span id="basic-addon2">Yearly interest (%)</span>
<input type="text" aria-label="yearly interest" aria-describedby="basic-addon2" id="yearlyInt">
</div>
<div style='margin-bottom: 16px;'>
<span id="basic-addon3">My Goal</span>
<input type="text" id="goal" aria-describedby="basic-addon3" id="goal">
</div>
<button type="button" style="margin-top:30px"; id="calc" onclick="calculate()">Calculate</button>
</form>
<div id="result"></div>
</div>