Estoy tratando de enviar un archivo Javascript a la página HTML, y me encuentro con algunas dificultades. Básicamente, el usuario seleccionaría las opciones de los menús desplegables y la entrada de los cuadros de texto, presionaría calcular y el programa calcularía los valores necesarios.

Una vez completado el cálculo, hay tres variables que me gustaría enviar a la página. No tenga en cuenta los cálculos reales, son irrelevantes. Estoy usando jQuery y Javascript, creo que puedo devolver una sola variable, pero ¿cómo devuelvo todas las variables que necesito?

Aquí está la página HTML que tengo y el archivo javascript.

      <!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>

Y aquí está el archivo Javascript

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;


}
0
Spets 1 sep. 2011 a las 06:30

4 respuestas

La mejor respuesta

Para devolver varios valores de una función de JavaScript, puede crear un nuevo objeto "anónimo", algo así en la función Main ():

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};
}

Luego, debe modificar el marcado para agregar identificadores a los campos donde desea generar las variables:

<td>
Manipulated Oranges: <span  id="manOranges"></span>
</td>

Luego tendrá que cambiar la función de JavaScript ShowCalculation para que se vea así:

function ShowCalculation() {
    var results = Main($("#orangeSel").val(), $("#appleSel").val(), $("#soccerTxt").val(), $("#basketballTxt").val(), $("#banSel").val());

    $("#manOranges").html(results.output1);

}

... Espero que esto ayude

Editar: se agregó la función principal completa para mostrar cómo debe verse toda la función.

1
willvv 1 sep. 2011 a las 03:56

Puede devolver los resultados como un objeto. Algo en este sentido:

return {
    outputOne: c,
    outputTwo: d,
    outputThree: 5
};

Esto se conoce como notación literal de objetos JavaScript. Puede leer más al respecto en este artículo.

EDITAR:

Usando jQuery, hay varias maneras de agregar los resultados a su página. jQuery.append o jQuery.html son dos de estas formas.

Publiqué un ejemplo usando su código en jsFiddle. Además, hay un error en esta línea:

for (var j = 0; j < 10; i++) 

i++ debería ser j++.

1
Garett 1 sep. 2011 a las 03:43

Si desea devolver el valor a otra función de JavaScript, puede usar un objeto de mapa:

var output=[ val1, val2, val3];

Y luego pasar a través de ellas con una foreach

for (i in output){
  do something
}

Si desea mostrar estos valores en su html, le aconsejaría que establezca los valores de su javascript directamente, dándole a la celda que desea los valores en una ID y poniendo un valor como este

document.getElementById('answer1').innerHTML = val1;
0
Benjamin Udink ten Cate 1 sep. 2011 a las 02:45

En su código, está utilizando el selector de id para obtener el valor de algunos elementos

$("#orangeSel").val()

Del mismo modo, debe establecer el valor una vez que realiza el cálculo

$("#answer-area").html('the answer)

creo si su área de respuesta es una entrada, puede usar val('the answer') en lugar de html.

0
hvgotcodes 1 sep. 2011 a las 02:34