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

【问题标题】：Display the result of a javascript function in a div element在 div 元素中显示 javascript 函数的结果
【发布时间】：2013-04-20 06:08:39
【问题描述】：

我有一个 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>

提前感谢所有帮助

【问题讨论】：

标签： javascript html

【解决方案1】：

使用内部HTML

<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>

【讨论】：

谢谢你完美的工作。一个问题，如果我可以......如果我想在结果中添加文本怎么办。即我希望用一些文本从总变量中显示总和。
In document.getElementById('total').innerHTML = "你的文字：" +total;

【解决方案2】：

给你的<div> 一个 id，比如...

<div id="resultDiv"></div>

然后在您的 javascript 中设置 .innerHTML 属性...

document.getElementById("resultDiv").innerHTML = total.toString();

【讨论】：

【解决方案3】：

你可以使用

 <div id="resultDiv"></div>


document.getElementById("resultDiv").innerHTML = total.toString();

【讨论】：

【解决方案4】：

$(document).ready(function(){
  $("#serachimg").click(function(){
    $("#search").slideToggle();
  });
});
 function content(){
    var div = document.getElementById("textDiv");
    div.textContent = "my text";
    var text = div.textContent;
	var div = document.getElementById("textDiv");
	div.style="font-size:24px";
 }

&lt;div id="textDiv"&gt;&lt;script&gt; content();&lt;/script&gt;&lt;/div&gt;

【讨论】：

【解决方案5】：

window.onload = function () {
var display = document.querySelector('#total');
total(display);
};

<div>The grand total is <span id="total"></span></div>

【讨论】：