html - Display the result of a javascript function in a div element -

i have javascript function following:

• it takes value list box user selected , assigns value variable
• it takes number user selected in listbox , stores in variable.
• it multiplies value number total
• finally adds 15% vat total
• the grand total displayed in alert box

however instead of displaying result in alertbox display result in div element on webpage under form. ideas how can accomplish this?

my code looks 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 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 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>