Menu
Can anyone tell me why the result of the javascript doesn’t output into the h2 tags. This is my second day of coding and any help would be much appreciated….thanks
HTML
<!DOCTYPE html>
<html>
<head>
<title>Goal Calculator</title>
<link rel=”stylesheet” href=”styles.css”>
<script>
function calculate() {
var sbal = document.getElementById(‘sbal’).value;
var goal = document.getElementById(‘goal’).value;
var exp = document.getElementById(‘exp’).value;
var accben = document.getElementById(‘accben’).value;
var main = ((goal – (sbal – accben)) / 12 );
var result = (main + exp).tofixed(2);
payment = payment.toString().replace(/B(?=(d{3})+(?!d))/g, “,”);
document.getElementById(‘payment’).innerHTML = “Monthly Payment = $”+payment;
}
</script>
</head>
<body>
<div class=”wrapper”>
<div class=”contact-form”>
<div class=”input-fields” id=”calculate-form”>
<div class=”drop”>
<label>Time Period</label>
<select id = “myList”>
<option value = “1”>Week</option>
<option value = “2”>Fortnight</option>
<option value = “3”>Year</option>
</select>
</div>
<input id=”sbal” class=”input” type=”number” placeholder=”Starting Balance”>
<input id=”goal” class=”input” type=”number” placeholder=”Overall Goal”>
<input id=”exp” class=”input” type=”number” placeholder=”Expenditure”>
<input id=”accben” class=”input” type=”number” placeholder=”Account Benchmark”>
<h2 id=”payment”></h2>
</div>
</div>
</div>
</div>
<div>
<button class=”btn” id=”footer” onclick=”calculate()”>Submit</button>
</div>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
font-family: cursive, sans-serif;
}
body{
background: url(‘flex.png’) no-repeat top center;
background-size: cover;
height: 100vh;
}
.logo img{
position: relative;
left: 25px;
padding: 0px;
float: left;
width: 150px;
height: auto;
margin-top:10px;
margin-left: 10px;
}
.wrapper{
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
padding: 0 20px;
}
.drop{
position: relative;
left:15px;
}
.myList:hover {
background-color: rgba(0,0,0,0.1);
}
select{
background-color: transparent;
border: transparent;
position: relative;
left: 40px;
color: #fff;
cursor: pointer;
}
select:active {
background-color: transparent;
}
label {
position: relative;
left: 15px;
color: #fff;
}
.contact-form{
display: flex;
max-width: 450px;
margin: 0 auto;
background: rgba(0,0,0,0.8);
padding: 30px;
border: 5px solid #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.input-fields{
position: relative;
left: 115px;
display: flex;
flex-direction: column;
margin-right: 4%;
position: relative;
}
.input-fields,
.msg{
width: 44%;
}
.input-fields .input,
textarea{
margin: 10px 0;
background: transparent;
border: 0px;
border-bottom: 2px solid #fff;
padding: 10px;
color: #fff;
width: 100%;
}
h2 {
text-align: center;
position: relative;
top: 15px;
color: #fff;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
}
.btn {
background: #000;
text-align: center;
padding: 15px;
border-radius: 5px;
border-style: none;
color: #fff;
cursor: pointer;
text-transform: uppercase;
}
a {
text-decoration: none;
color: #fff;
}