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;


}

willvv · Accepted Answer · 2011-09-01 03:56:46Z

1

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.

edited Sep 1, 2011 at 3:56

answered Sep 1, 2011 at 2:47

willvv

8,67716 gold badges69 silver badges103 bronze badges

Let me try this I think this will work I tried something similar to this earlier.

Spets
– Spets

09/01/2011 02:55:19
Commented Sep 1, 2011 at 2:55
A thing to note is that if you want to perform the calculation more than once it's better to add a span with id after the "Manipulated Oranges:" text, and set the html of the span instead of appending values to the td.

willvv
– willvv

09/01/2011 02:58:06
Commented Sep 1, 2011 at 2:58
Just edited the answer to do as I mention on my previous comment.

willvv
– willvv

09/01/2011 02:59:36
Commented Sep 1, 2011 at 2:59
I get an error saying "Microsoft JScript runtime error: 'Main' is undefined"

Spets
– Spets

09/01/2011 03:10:03
Commented Sep 1, 2011 at 3:10
that means you aren't importing correctly the javascript file that contains the Main function. If you get that then you were getting the same error with the code you show in the question.

willvv
– willvv

09/01/2011 03:12:16
Commented Sep 1, 2011 at 3:12

| Show 3 more comments

Garett · Accepted Answer · 2011-09-01 03:43:05Z

1

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++.

edited Sep 1, 2011 at 3:43

answered Sep 1, 2011 at 2:44

Garett

16.9k5 gold badges58 silver badges63 bronze badges

how do I then output this in my HTML page.?

Spets
– Spets

09/01/2011 02:51:59
Commented Sep 1, 2011 at 2:51

Add a comment |

hvgotcodes · Accepted Answer · 2011-09-01 02:34:27Z

0

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.

answered Sep 1, 2011 at 2:34

hvgotcodes

121k33 gold badges209 silver badges237 bronze badges

i'm confused? Is that how I write the answer? I have to return many variables.

Spets
– Spets

09/01/2011 02:53:57
Commented Sep 1, 2011 at 2:53
@spets, im just saying, take the results and use jquery to write the values into the doc. If your question is how to return the values, do so in an object literal like {output1: outputOne, output2: outputTwo...}.

hvgotcodes
– hvgotcodes

09/01/2011 03:07:12
Commented Sep 1, 2011 at 3:07

Add a comment |

Ben · Accepted Answer · 2011-09-01 02:45:25Z

0

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;

answered Sep 1, 2011 at 2:45

Ben

13.7k4 gold badges51 silver badges70 bronze badges

Add a comment |

Collectives™ on Stack Overflow

Trying to output from Javascript file to HTML page?

4 Answers 4

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Your Answer

Sign up or log in

Post as a guest

Related