我在显示用户的输入时遇到了问题，我花了一些时间查看它，不确定是哪个部分出错了。我应该用绿色显示“结果”一词，并以表格的形式显示用户的输入。我使用document.getElementsByClassName（'container '）.innerHTML在主页中添加了新元素。有人能解释一下为什么“结果”一词和表格没有显示吗？
我的代码：
/*** 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>`;
}
3条答案
按热度按时间ct2axkht1#
使用您的函数，您可以使用以下代码
1.表单域是文本域。使用
parseInt()可以将文本字符串转换为整数。1.下面我添加了一个额外的
<div id="result"></div>，但是如果你想使用容器div，你可以用document.querySelector(".container").innerHTML = ...来定位这个div。这将选择具有该名称的第一个类。注意，这将替换表单中的所有html代码！第一个
byqmnocz2#
1：函数名不是函数执行！
至
2：
getElementsByClassName返回一个集合而不是元素！3：计算前缺少
parseIntjxct1oxe3#
除了其他用户在您的原始问题中发表的评论外，您的代码还有许多不正确的地方：
1.您需要使用
value来获取输入值，因此将varinitialAmt = document.getElementById("initialAmt");更改为var initialAmt = document.getElementById("initialAmt").value;1.当使用
innerHTML时，需要追加该值，确保不要覆盖它第一个