Hello Friends My Name Is Viraj,Today I Will Calculate Valu On Your Web Page.In this tutorial, we will learn how to perform calculations using JavaScript. It is quite often required to do calculations online in order forms, request quote forms and the like. This tutorial will show you how to use different form elements like drop-down list, radio button, check box and text box in a calculation.We will be using a ‘cake order form’ as an example. As the user makes selections in the form, the total price is calculated in real time.Read "Writing and Debugging JavaScripts", before trying out these examples. At a minimum, you should have the "Firebug" (or Web Developer Tools). It is very difficult to debug JavaScript codes due to its loose syntax. One misspell character in variable or function name, may waste a lot of your time, as JavaScript treat it as a new item or abort the function.Let us create a simple web app that helps to calculate simple interest. The code is given below. You can paste it into a text editor (e.g.: gEdit or Notepad), save it with a filename that has the extension .html (e.g.: simpleint.html), open it in a web browser, and run it.It is a good practice to separate the HTML contents, CSS presentation styles and JavaScript behavior programming codes in three different files, ".html", ".css" and ".js", for ease of maintenance and good software engineering practice. The now-preferred approach is not to embed styles and JavaScript codes inside HTML document, but keep them in separate files.The calculate() function acts as the handler for the onclick event of the button. That is, when the user clicks the button Calculate, the calculate() function is executed.
The function should get the values that the user has entered into the input boxes. In order to do this, it uses the document.getElementById() method and the value property. After the calculation, the result is put inside a paragraph element using the same mechanism (assignment instead of reading, this time).JavaScript supports basic mathematical operations like addition, subtraction, division and so on. These mathematical operations makes sense on numbers, but in HTML, the data that we read is in string format, which means the data is to converted to a number, before we can perform mathematical operations on them. In this article, we will learn how to use jQuery to traverse all of the values in a HTML table column, convert the values to numbers, and then sum the values.In this series, we are going to be making a simple calculator with basic HTML, CSS and JavaScript. Our calculator will only able to perform basic math operations: addition, subtraction, multiplication and division. To better understand this tutorial you would need to have a little knowledge of HTML and CSS.Here In This Html Tutorial We Will Calculate Different Value Of Flower Base On Rate In Html/Css/Javascript.In This Tutorial We Will Count The Value Of Flower Base On Rate Using Html/Css/Javascript Code.Here Is An Example ...
So Let Begin With Our Coding............
Step 1:
<html>
<table border="1" bordercolor="yellow">
<colgroup span="3" width="360"></colgroup>
<thead>
<tr bgcolor="blue">
<th><img src="C:\Users\Viraj\Desktop\viraj\imp\classs\bb\HTML\demo html project rupesh\img2.jpg" width="50" height="50">
<p>
<form method="post">
rate :"50" <br>
quantity=<input type="text" id="quantity" name="quantity"/>
<br>
<input type="button" value="value" onclick="myFunction()"/>
<script>
function myFunction()
{
var val1= parseInt(document.getElementById("quantity").value);
var ans=50*val1;
alert("quantity="+ans);
}
</script>
</p>
</th>
<th><img src="C:\Users\Viraj\Desktop\viraj\imp\classs\bb\HTML\demo html project rupesh\img2.jpg" width="50" height="50">
<p>rate="40"<br>
quantity=<input type="text" id="quantity1" name="quantity1"/>
<br>
<input type="button" value="value" onclick="myFunction1()"/>
<script>
function myFunction1()
{
var val1= parseInt(document.getElementById("quantity1").value);
var ans=40*val1;
alert("quantity1="+ans);
}
</script>
</p>
</th>
<th><img src="C:\Users\Viraj\Desktop\viraj\imp\classs\bb\HTML\demo html project rupesh\img2.jpg" width="50" height="50">
<p>rate="30"
<br>
quantity=<input type="text" id="quantity2" name="quantity2"/>
<br>
<input type="button" value="value" onclick="myFunction2()"/>
<script>
function myFunction2()
{
var val1= parseInt(document.getElementById("quantity2").value);
var ans=30*val1;
alert("quantity2="+ans);
}
</script>
</p>
</th>
</tr>
</thead>
</table>
</html>
Output :
The function should get the values that the user has entered into the input boxes. In order to do this, it uses the document.getElementById() method and the value property. After the calculation, the result is put inside a paragraph element using the same mechanism (assignment instead of reading, this time).JavaScript supports basic mathematical operations like addition, subtraction, division and so on. These mathematical operations makes sense on numbers, but in HTML, the data that we read is in string format, which means the data is to converted to a number, before we can perform mathematical operations on them. In this article, we will learn how to use jQuery to traverse all of the values in a HTML table column, convert the values to numbers, and then sum the values.In this series, we are going to be making a simple calculator with basic HTML, CSS and JavaScript. Our calculator will only able to perform basic math operations: addition, subtraction, multiplication and division. To better understand this tutorial you would need to have a little knowledge of HTML and CSS.Here In This Html Tutorial We Will Calculate Different Value Of Flower Base On Rate In Html/Css/Javascript.In This Tutorial We Will Count The Value Of Flower Base On Rate Using Html/Css/Javascript Code.Here Is An Example ...
So Let Begin With Our Coding............
Step 1:
<html>
<table border="1" bordercolor="yellow">
<colgroup span="3" width="360"></colgroup>
<thead>
<tr bgcolor="blue">
<th><img src="C:\Users\Viraj\Desktop\viraj\imp\classs\bb\HTML\demo html project rupesh\img2.jpg" width="50" height="50">
<p>
<form method="post">
rate :"50" <br>
quantity=<input type="text" id="quantity" name="quantity"/>
<br>
<input type="button" value="value" onclick="myFunction()"/>
<script>
function myFunction()
{
var val1= parseInt(document.getElementById("quantity").value);
var ans=50*val1;
alert("quantity="+ans);
}
</script>
</p>
</th>
<th><img src="C:\Users\Viraj\Desktop\viraj\imp\classs\bb\HTML\demo html project rupesh\img2.jpg" width="50" height="50">
<p>rate="40"<br>
quantity=<input type="text" id="quantity1" name="quantity1"/>
<br>
<input type="button" value="value" onclick="myFunction1()"/>
<script>
function myFunction1()
{
var val1= parseInt(document.getElementById("quantity1").value);
var ans=40*val1;
alert("quantity1="+ans);
}
</script>
</p>
</th>
<th><img src="C:\Users\Viraj\Desktop\viraj\imp\classs\bb\HTML\demo html project rupesh\img2.jpg" width="50" height="50">
<p>rate="30"
<br>
quantity=<input type="text" id="quantity2" name="quantity2"/>
<br>
<input type="button" value="value" onclick="myFunction2()"/>
<script>
function myFunction2()
{
var val1= parseInt(document.getElementById("quantity2").value);
var ans=30*val1;
alert("quantity2="+ans);
}
</script>
</p>
</th>
</tr>
</thead>
</table>
</html>
Output :
Good
ReplyDelete