试图从Javascript文件输出到HTML页面？

Question

我试图从Javascript文件输出到HTML页面，我遇到了一些困难。 基本上用户可以从下拉菜单中选择选项并从文本框中输入，点击计算，程序将计算必要的值。

计算完成后，我想将三个变量输出回页面。 无视实际计算，它们无关紧要。 我正在使用jQuery和Javascript，我想我可以返回一个变量但是如何返回我需要的所有变量。

这是我的HTML页面和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>

这是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;


}

Answer 1

您可以将结果作为对象返回。 这些方面的东西：

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

这被称为JavaScript Object Literal Notation。 您可以在本文中阅读更多相关信息。

编辑：

使用jQuery，您可以通过多种方式将结果添加到页面中。 jQuery.append或jQuery.html是两种这样的方式。

我在jsFiddle上使用你的代码发布了一个例子。 此外，这一行还有一个错误：

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

i++应该是j++ 。

Answer 2

要从JavaScript函数返回多个值，您可以在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};
}

然后，您必须修改标记以将id添加到要输出变量的字段：

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

然后你必须将JavaScript函数ShowCalculation更改为如下所示：

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

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

}

... 希望这可以帮助

编辑：添加完整的主要功能，以显示整个功能的外观。

Answer 3

在您的代码中，您使用id选择器来获取某些元素的值

$("#orangeSel").val()

以同样的方式，您需要在进行计算后设置值

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

我相信如果你的答案区是一个输入，你可以使用val('the answer')代替html 。

Answer 4

如果你想将值返回到另一个javascript函数，你可以使用map对象：

var output=[ val1, val2, val3];

然后使用foreach循环使用em

for (i in output){
  do something
}

如果你想在你的html中显示这些值，我建议你直接通过给你想要值的单元格来设置你的javascript中的值，并设置这样的值

document.getElementById('answer1').innerHTML = val1;

试图从Javascript文件输出到HTML页面？

问题描述

4 个解决方案

解决方案1
1 2011-09-01 02:44:40

解决方案2
1 已采纳 2011-09-01 02:47:17

解决方案3
0 2011-09-01 02:34:27

解决方案4
0 2011-09-01 02:45:25

试图从Javascript文件输出到HTML页面？

问题描述

4 个解决方案

解决方案1 1 2011-09-01 02:44:40

解决方案2 1 已采纳 2011-09-01 02:47:17

解决方案3 0 2011-09-01 02:34:27

解决方案4 0 2011-09-01 02:45:25

解决方案1
1 2011-09-01 02:44:40

解决方案2
1 已采纳 2011-09-01 02:47:17

解决方案3
0 2011-09-01 02:34:27

解决方案4
0 2011-09-01 02:45:25