I have a function in an external java script file and I dont know how to call and return the value that my function returns in text properly. When I click place order, I want the values to be calculated by my function and then the final value to be displayed underneath the place order box. I can get my function to alert if I enter nothing but I can't get it to return my final value- what am I doing wrong?
function sum2()
{
var one = document.getElementById("book_1").value;
var two = document.getElementById("book_2").value;
var three = document.getElementById("book_3").value;
if ((one == "")||(two == "")||(three == ""))
{
alert ('Error', 'values missing');
}
else
{
var sum1 = one * 19.99;
var sum2 = two * 86.00;
var sum3 = three * 55.00;
var sum = sum1 + sum2 + sum3;
document.getElementById('output').value = sum;
document.write(sum);
}<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
".dtd">
<html xmlns="">
<head>
<title>Work</title>
<script type="text/javascript" src="ex4.js"></script>
</head>
<body>
<div id="container">
<h2>Order Books Online</h2>
<form action="" method="post" id=”frm”>
<fieldset>
<table border="0">
<tr>
<th>Book</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>Basics of C++</td>
<td><input type="text" size="3" id="book_1" /></td>
<td>$19.99</td>
</tr>
<tr>
<td>Program Development in Perl</td>
<td><input type="text" size="3" id="book_2" /></td>
<td>$86.00</td>
</tr>
<tr>
<td>Advanced JavaScript</td>
<td><input type="text" size="3" id="book_3" /></td>
<td>$55.00</td>
</tr>
</table>
<br /><br />
<input type="submit" onclick="sum2(); return false;" value="Place Order" id="sub" />
</fieldset>
</form>
</div>
</body>
</html>I have a function in an external java script file and I dont know how to call and return the value that my function returns in text properly. When I click place order, I want the values to be calculated by my function and then the final value to be displayed underneath the place order box. I can get my function to alert if I enter nothing but I can't get it to return my final value- what am I doing wrong?
function sum2()
{
var one = document.getElementById("book_1").value;
var two = document.getElementById("book_2").value;
var three = document.getElementById("book_3").value;
if ((one == "")||(two == "")||(three == ""))
{
alert ('Error', 'values missing');
}
else
{
var sum1 = one * 19.99;
var sum2 = two * 86.00;
var sum3 = three * 55.00;
var sum = sum1 + sum2 + sum3;
document.getElementById('output').value = sum;
document.write(sum);
}<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<title>Work</title>
<script type="text/javascript" src="ex4.js"></script>
</head>
<body>
<div id="container">
<h2>Order Books Online</h2>
<form action="" method="post" id=”frm”>
<fieldset>
<table border="0">
<tr>
<th>Book</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>Basics of C++</td>
<td><input type="text" size="3" id="book_1" /></td>
<td>$19.99</td>
</tr>
<tr>
<td>Program Development in Perl</td>
<td><input type="text" size="3" id="book_2" /></td>
<td>$86.00</td>
</tr>
<tr>
<td>Advanced JavaScript</td>
<td><input type="text" size="3" id="book_3" /></td>
<td>$55.00</td>
</tr>
</table>
<br /><br />
<input type="submit" onclick="sum2(); return false;" value="Place Order" id="sub" />
</fieldset>
</form>
</div>
</body>
</html>2 Answers
Reset to default 4Try this, its working, output is displaying on last.
function sum2()
{
var one = document.getElementById("book_1").value;
var two = document.getElementById("book_2").value;
var three = document.getElementById("book_3").value;
if ((one == "")||(two == "")||(three == ""))
{
alert ('Error', 'values missing');
}
else
{
var sum1 = one * 19.99;
var sum2 = two * 86.00;
var sum3 = three * 55.00;
var sum = sum1 + sum2 + sum3;
document.getElementById('output').innerHTML = sum;
// document.write(sum);
}
}<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<title>Work</title>
<script type="text/javascript" src="ex4.js"></script>
</head>
<body>
<div id="container">
<h2>Order Books Online</h2>
<form action="" method="post" id=”frm”>
<fieldset>
<table border="0">
<tr>
<th>Book</th>
<th>Quantity</th>
<th>Price</th>
</tr>
<tr>
<td>Basics of C++</td>
<td><input type="text" size="3" id="book_1" /></td>
<td>$19.99</td>
</tr>
<tr>
<td>Program Development in Perl</td>
<td><input type="text" size="3" id="book_2" /></td>
<td>$86.00</td>
</tr>
<tr>
<td>Advanced JavaScript</td>
<td><input type="text" size="3" id="book_3" /></td>
<td>$55.00</td>
</tr>
</table>
<br /><br />
<input type="submit" onclick="sum2(); return false;" value="Place Order" id="sub" />
</fieldset>
</form>
</div>
<div id="output"></div>
</body>
</html>The use of document.write() doesn't seem to be what you'd want here. (And, honestly, should be avoided in general anyway.)
However, this will do what you want:
document.getElementById('output').value = sum;
All you need is an HTML input element which has that id (which your HTML is currently missing):
<input type="text" id="output" />
(Additionally, your JavaScript is missing a closing }, which is a syntax error.)
Once you have that HTML element and remove the document.write() call, this should be outputting the value correctly.
If you want to output to something other than another input element, then you wouldn't use .value but something more like .innerHTML instead:
document.getElementById('output').innerHTML = sum;
with an element such as:
<span id="output"></span>
As an aside regarding terminology, this isn't "returning" the value from the function. "Return" has a very specific meaning when it es to functions, it's when the function itself results in a value using the return keyword, passing that value back up the stack to the code which called the function.
This function is writing a value to the HTML, but it's not returning anything.