javascript - 在 div 元素中显示 javascript 函数的结果

Question

我有一个执行以下操作的 Javascript 函数:

• 它从用户选择的列表框中获取值并将值分配给变量
• 然后它获取用户在列表框中选择的数字并将其存储在一个变量中。
• 然后将值乘以数字得到总数
• 最后它增加了 15% 的增值税
• 然后总计显示在警告框中

但是，我不想在警告框中显示结果，而是想在网页上表单下的 DIV 元素中显示结果。有什么想法可以实现吗？

我的代码如下所示:

<script type="text/javascript">
function calc()
{
var total = 0;
var course = 0;
var nrOfLessons = 0;
var vat = 0;

course = Number(document.getElementById("course").value)
nrOfLessons = Number(document.getElementById("nrOfLessons").value)

total =(course * nrOfLessons)
vat = total * 0.15
total = total+ vat;
window.alert(total)
}
</script>

 <form id="booking">
 <strong>COURSE: </strong>
 <select id="course">
 <optgroup label="English Courses">
 <option value="500">Beginner English</option>
 <option value="700">Mid-Level English</option>
 <option value="1000">Business English</option>
 </optgroup>
 <optgroup label="Thai Courses">
 <option value="500">Introduction to Thai</option>
 <option value="700">Pasa Thai</option>
 <option value="1000">Passa Thai Mak</option>
</optgroup>

</select>

<select id="nrOfLessons">
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>

</select>

提前感谢所有的帮助

Answer 1

使用 innerHTML

<script type="text/javascript">
function calc()
{
var total = 0;
var course = 0;
var nrOfLessons = 0;
var vat = 0;

course = Number(document.getElementById("course").value)
nrOfLessons = Number(document.getElementById("nrOfLessons").value)

total =(course * nrOfLessons)
vat = total * 0.15
total = total+ vat;
document.getElementById('total').innerHTML = total;
}
</script>

<div id="total"></div>