CODEWITHSUNDEEP
javascripthtml
Tim C
Tim C

Reputation: 5714

Display the result of a javascript function in a div element

I have a Javascript function which does the following:

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

Upvotes: 9

Views: 76265

Answers (5)

Sprose
Sprose

Reputation: 1345

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

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

Upvotes: -2

Girish
Girish

Reputation: 39

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

Upvotes: 1

PSR
PSR

Reputation: 40358

you can use

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


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

Upvotes: 1

freefaller
freefaller

Reputation: 19963

Give your <div> an id, such as...

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

Then in your javascript set the .innerHTML property...

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

Upvotes: 4

Tamil Selvan C
Tamil Selvan C

Reputation: 20239

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>

Upvotes: 14

Related Questions