Home/ Questions/Q 6380415
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T02:15:52+00:00

I am trying to output from a Javascript file to the HTML page, and

  • 0

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;


}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0