This example calls a function which performs a calculation, and returns the result.
Here are the functions which are written in the head section:
This division appears first in the HTML and floats to the right.
<script>
document.getElementById("demo").innerHTML = myFunction(80, 300);
document.getElementById("demo2").innerHTML = myFunction(10, 5);
document.write("Now read this ");
document.write("<p>" + myFunction2(50,60) + "</p>");
document.write("Now read this ");
document.write("<p>" + myFunction2(55,670) + "</p> ");
document.write("Now read this ");
document.write("<p>" + myFunction2(58,99) + "</p> ");
</script>
<div style="border:10px dashed fuchsia; width:94%;">
<ol>
<li class="myclass" id="demo3"></li>
<li class="myclass" id="demo4"></li>
<li class="myclass">Now subtract</li>
<li class="myclass" id="demo5"></li>
</ol>
</div>
<script>
document.getElementById("demo3").innerHTML = myFunction2(10, 5);
document.getElementById("demo4").innerHTML = myFunction2(98, 45);
document.getElementById("demo5").innerHTML = myFunction3(98, 45);
</script>
</div>
<script>
function myFunction(a,b) {
return a * b;
}
function myFunction2(x,y) {
return x * y;
}
function myFunction3(l,m) {
return l - m;
}
</script>
/* styles for ordered list and display in-line */
<style>
ol {list-style-type-:upper-roman;
margin-left:2px;
margin-top:50px;
}
.myclass {display:inline;
width:50px;
padding:10px;
marging:10px;
}
</style>
Return to Table of Contents