在div元素中显示javascript函数的结果 [英] Display the result of a javascript function in a div element

问题描述

我有一个Javascript函数，它执行以下操作：

• 它从用户选择的列表框中获取值并指定值赋给一个变量
  
• 然后它将用户在列表框中选择的数字存储到一个变量中。


• 然后，将该值与获得总数的数字


• 最后，它将总数增加15％


• 然后总计显示在警告框中
>

然而，不要在alertbox中显示结果，我希望将结果显示在表单下的网页上的DIV元素中。任何想法我可以做到这一点？

我的代码如下所示：

 < script type =text / javascript> 
函数calc（）
 {
 var total = 0; 
 var course = 0; 
 var nrOfLessons = 0; 
 var vat = 0; 
 
 course = Number（document.getElementById（course）。value）
 nrOfLessons = Number（document.getElementById（nrOfLessons）。）
 
 total =（course * nrOfLessons）
 vat = total * 0.15 
 total = total + vat; 
 window.alert（total）
} 
< / script> 
 
 
< strong>课程：< / strong> 
< select id =course> 
< optgroup label =英语课程> 
< option value =500>新手英语< / option> 
< option value =700>中级英语< / option> 
< option value =1000>商业英语< / option> 
< / optgroup> 
< optgroup label =Thai Courses> 
< option value =500>泰国简介< / 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提供帮助

解决方案

使用innerHTML

 < script type =text / javascript> 
函数calc（）
 {
 var total = 0; 
 var course = 0; 
 var nrOfLessons = 0; 
 var vat = 0; 
 
 course = Number（document.getElementById（course）。value）
 nrOfLessons = Number（document.getElementById（nrOfLessons）。）
 
 total =（course * nrOfLessons）
 vat = total * 0.15 
 total = total + vat; 
 document.getElementById（'total'）。innerHTML = total; 
} 
< / script> 
 
< div id =total>< / div> 
  

I have a Javascript function which does the following:

• 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

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?

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

解决方案

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

这篇关于在div元素中显示javascript函数的结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！