I have this simple example code, 3 textboxes. If I write numbers in the first two, it multiplies them and writes the result in the third one. However, if I run the code, I get an error saying: "ReferenceError: calc is not defined". Am I missing something?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="text/javascript">
function calc()
{
var txt1 = (float) document.getElementById('text1').value;
var txt2 = (float) document.getElementById('text2').value;
document.getElementById('text3').value = (txt1 * txt2);
}
</script>
</head>
<body>
<table>
<tr>
<td><input type="text" id="text1" name="text1"></td>
<td><input type="text" id="text2" name="text2" onkeypress="calc();"></td>
<td><input type="text" id="text3" name="text3"></td>
</tr>
</table>
</body>
</html>
Update: Whoever wrote that "(float)" is causing the problem, was right. Thanks for the help.
7 Answers 7
Try to use parseFloat to cast to float
function calc()
{
var txt1 = parseFloat(document.getElementById('text1').value);
var txt2 = parseFloat(document.getElementById('text2').value);
document.getElementById('text3').value = (txt1 * txt2);
}
Comments
The reason you are getting that error is because the function you have defined there is invalid, so it is not loaded. The problem lies with (float) - you can't typecast like that in JavaScript.
Use the parseFloat() function as follows:
var txt1 = parseFloat(document.getElementById('text1').value);
Note that Rajesh is also correct in that you need to change
<script language="text/javascript">
to
<script type="text/javascript">
The complete, correct script is as follows:
<script type="text/javascript">
function calc()
{
var txt1 = parseFloat(document.getElementById('text1').value);
var txt2 = parseFloat(document.getElementById('text2').value);
document.getElementById('text3').value = (txt1 * txt2);
}
</script>
Comments
1) Try changing
<script language="text/javascript">
to
<script type="text/javascript">
If you would like to use the deprecated language attribute you could do:
<script language="Javascript">
Additionally, as others have already pointed out that to get a float from a string you can use parseFloat and pass the string as a parameter. Using (float) is often used in Java to convert from a numeric type such as double or int to float.
2) Try changing
var txt1 = (float) document.getElementById('text1').value;
var txt2 = (float) document.getElementById('text2').value;
to
var txt1 = parseFloat(document.getElementById('text1').value;
var txt2 = parseFloat(document.getElementById('text2').value;
2 Comments
Use parseFloat() instead of (float)
Comments
try this Demo
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/JavaScript">
function calc()
{
var txt1 = document.getElementById('text1');
var txt2 = document.getElementById('text2');
document.getElementById('text3').value = (parseFloat(txt1.value) * parseFloat(txt2.value));
}
</script>
</head>
<body>
<table>
<tr>
<td><input type="text" id="text1" name="text1" value=""></td>
<td><input type="text" id="text2" name="text2" value=""></td>
<td><input type="text" id="text3" name="text3" onkeypress="calc()" value=""></td>
</tr>
</table>
</body>
</html>
Comments
use this line <script language="javascript" type="text/javascript">
1 Comment
I is the (float) casting that causes the problem.