Display The Result Of A Javascript Function In A Div Element

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

Solution 1:

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>

Solution 2:

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();

Solution 3:

you can use

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


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

Solution 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";
 }

<div id="textDiv"><script> content();</script></div>

Solution 5:

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

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