Html 在 div 元素中显示 javascript 函数的结果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16117290/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display the result of a javascript function in a div element
提问by Timothy Coetzee
I have a Javascript function which does the following:
我有一个 Javascript 函数，它执行以下操作：
- It takes the value from an list box which the user selected and assigns the value to a variable
- It then takes the number the user selected in a listbox and stores it in a variable.
- It then multiplies the value with the number to get the total
- Finally it adds 15% vat to the total
- The grand total is then displayed in an alert box
- 它从用户选择的列表框中获取值并将该值分配给变量
- 然后它将用户在列表框中选择的数字存储在一个变量中。
- 然后将值与数字相乘得到总数
- 最后它增加了 15% 的增值税
- 总计然后显示在警告框中
However instead of displaying the result in an alertbox I would like to display the result in an DIV element on the webpage under the form. Any ideas how I can accomplish this?
但是，我不想在警报框中显示结果，而是希望在表单下网页上的 DIV 元素中显示结果。我有什么想法可以做到这一点吗？
My code looks as follows:
我的代码如下所示：
<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>
Thanx in advance for all the help
提前感谢所有帮助
回答by Tamil Selvan C
Use innerHTML
使用内部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>
回答by freefaller
Give your <div>an id, such as...
给你<div>一个id，比如...
<div id="resultDiv"></div>
Then in your javascript set the .innerHTMLproperty...
然后在你的 javascript 中设置.innerHTML属性...
document.getElementById("resultDiv").innerHTML = total.toString();
回答by PSR
you can use
您可以使用
<div id="resultDiv"></div>
document.getElementById("resultDiv").innerHTML = total.toString();
回答by Girish
$(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";
}<div id="textDiv"><script> content();</script></div>回答by Sprose
window.onload = function () {
var display = document.querySelector('#total');
total(display);
};
<div>The grand total is <span id="total"></span></div>
