Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 972
Timothy Coetzee Avatar asked Apr 20 '13 06:04

Timothy Coetzee


People also ask

What is function () () in JavaScript?

A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output.

Can you use div in JavaScript?

Using JavaScript In vanilla JavaScript, you can use the native createElement() method to create an HTML <div> element and the appendChild() method to append the <div> element to another container.

How to display result of a function as HTML in JavaScript?

To display the result of a function as HTML, you can use −. document.getElementById ().innerHTML.

How to access an HTML element in JavaScript?

Using innerHTML. To access an HTML element, JavaScript can use the document.getElementById(id) method. The id attribute defines the HTML element. The innerHTML property defines the HTML content:

How do I display data in JavaScript?

JavaScript can "display" data in different ways: 1 Writing into an HTML element, using innerHTML. 2 Writing into the HTML output using document.write (). 3 Writing into an alert box, using window.alert (). 4 Writing into the browser console, using console.log ().

How do I write to an HTML page in JavaScript?

Writing into the browser console, using console.log (). To access an HTML element, JavaScript can use the document.getElementById (id) method. The id attribute defines the HTML element.


2 Answers

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>
like image 75
Tamil Selvan C Avatar answered Sep 21 '22 09:09

Tamil Selvan C


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();
like image 21
freefaller Avatar answered Sep 18 '22 09:09

freefaller