Trying to output from Javascript file to HTML page?
Question
I am trying to output from a Javascript file to the HTML page, and I am coming across some difficulty. Basically the user would select the options from the drop down menus and input from the text boxes, hit calculate and the program would calculate the necessary values.
After the calculation is complete there are three variables that I would like to output back to the page. Disregard the actual calculations, they are irrelevant. I am using jQuery and Javascript, I guess I can return a single variable but how do I return all of the variables I need.
Here is the HTML page I have and the javascript file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="framework.js"></script>
<script type="text/javascript">
function ShowCalculation() {
Main($("#orangeSel").val(), $("#appleSel").val(), $("#soccerTxt").val(), $("#basketballTxt").val(), $("#banSel").val());
}
</script>
</head>
<body>
<div>
<div>
<br />
<table border="0">
<tr>
<td>
Number of Bananas
</td>
<td>
<select id="banSel">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
<td>
Number of Oranges:
</td>
<td><select id="orangeSel">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
<td>
Apples
</td>
<td>
<select id="appleSel">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3 </option>
<option value="4">4</option>
</select>
</td>
</tr>
<tr>
<td>
Soccer Score:
</td>
<td>
<input type="text" id="soccerTxt" value="2" size="3" />
</td>
<td>
Basketball Score:
</td>
<td>
<input type="text" id="basketballTxt" value="30" size="3" />
</td>
</tr>
</table>
<br />
<br />
<center><input type="submit" value="Calculate" onclick="ShowCalculation(); return false;" /></center>
</div>
</div>
<div>
<b><h1>Output</h1></b>
<table border="0">
<tr>
<td>
Manipulated Oranges:
</td>
</tr>
<tr>
<td>
Manipulated Apples:
</td>
</tr>
<tr>
<td>Manipulated Soccer:</td>
</tr>
</table>
</div>
</body>
</html>
And here is the Javascript file
function Main(orange, apple, soccer, basketball, banana) {
var a = parseInt(orange);
var b = parseInt(apple);
var c = parseInt(soccer);
var d = 0;
var e = parseInt(basketball);
var f = parseInt(banana);
for (var i = 0; i < a; i++) {
d += c;
}
for (var j = 0; j < 10; i++) {
c += 30;
}
var outputOne = c;
var outputTwo = d;
var outputThree = 5;
}
4 answers
solution1
1 2011-09-01 02:44:40
You could return the results as an object. Something along these lines:
return {
outputOne: c,
outputTwo: d,
outputThree: 5
};
This is know as JavaScript Object Literal Notation. You can read more about it in this article .
EDIT:
Using jQuery there are several ways you can then add the results to your page using. jQuery.append or jQuery.html are two such ways.
I posted an example using your code on jsFiddle . Also, there is a bug in this line:
for (var j = 0; j < 10; i++)
i++ should be j++ .
solution2
1 ACCPTED 2011-09-01 02:47:17
To return several values from a JavaScript function you can create a new "anonymous" object, something like this in the Main() function:
function Main(orange, apple, soccer, basketball, banana) {
var a = parseInt(orange);
var b = parseInt(apple);
var c = parseInt(soccer);
var d = 0;
var e = parseInt(basketball);
var f = parseInt(banana);
for (var i = 0; i < a; i++) {
d += c;
}
for (var j = 0; j < 10; i++) {
c += 30;
}
var outputOne = c;
var outputTwo = d;
var outputThree = 5;
return {output1:outputOne, output2:outputTwo, output3:outputThree};
}
Then you have to modify the markup to add ids to the fields where you want to output the variables:
<td>
Manipulated Oranges: <span id="manOranges"></span>
</td>
Then you will have to change the JavaScript function ShowCalculation to look like this:
function ShowCalculation() {
var results = Main($("#orangeSel").val(), $("#appleSel").val(), $("#soccerTxt").val(), $("#basketballTxt").val(), $("#banSel").val());
$("#manOranges").html(results.output1);
}
... Hope this helps
Edit: Added the complete Main function to show how the entire function has to look.
solution3
0 2011-09-01 02:34:27
In your code you are using the id selector to get the value of some elements
$("#orangeSel").val()
In the same way, you need to set the value once you do the computation
$("#answer-area").html('the answer)
I believe if your answer-area is an input, you can use val('the answer') in place of html .
solution4
0 2011-09-01 02:45:25
f you want to return the value to another javascript function you could use an map object:
var output=[ val1, val2, val3];
and then loop trough em with a foreach
for (i in output){
do something
}
if you want to display these values in your html i would advice you to set the values from your javascript directly by giving the cell you want the values at an ID and putting a value like this
document.getElementById('answer1').innerHTML = val1;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.