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

我想从Javascript文件输出到HTML页面，我遇到了一些困难。基本上用户会从下拉菜单中选择选项并从文本框中输入，点击计算，程序将计算出必要的值。试图从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; 


}

来源

2011-09-01 Spets

要从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; 

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

}

... 希望这有助于

编辑：添加完整的主要功能，以显示整个功能如何看。

来源

2011-09-01 02:47:17 willvv

让我试试这个我认为这会起作用我之前尝试过类似的东西。 – Spets

需要注意的是，如果您想多次执行计算，最好在“Manipulated Oranges：”文本之后添加带id的span，并设置span的html而不是将值附加到td。 – willvv

刚刚编辑了答案，就像我在之前的评论中提到的那样。 – willvv

在你的代码使用的是id选择获得一些元素

$("#orangeSel").val()

同样的价值，您需要在计算后设置该值

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

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

来源

2011-09-01 02:34:27 hvgotcodes

我很困惑？这是我如何写答案？我必须返回许多变量。 – Spets

@spets，我只是说，拿结果并使用jquery将值写入文档。如果您的问题是如何返回值，请在{output1：outputOne，output2：outputTwo ...}等对象字面值中进行。 – hvgotcodes

您可以将结果作为对象返回。沿着这些线：

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

这是知道的JavaScript对象文字符号。您可以在这article阅读更多关于它。

编辑：

使用jQuery有几种方法可以将结果用再添加到您的网页。 jQuery.append或jQuery.html是两种这样的方式。

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

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

i++应该是j++。

来源

2011-09-01 02:44:40 Garett

然后我如何在我的HTML页面输出这个？ – Spets

F你想要的值返回给另一个JavaScript函数，你可以使用一个地图对象：如果你想显示这些

var output=[ val1, val2, val3];

，然后循环槽时间与一个foreach

for (i in output){ 
    do something 
}

值在你的HTML我会建议你设置从你的JavaScript值直接给你的单元格，你想在一个ID的值，并把这样的值

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

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

来源

2011-09-01 02:45:25

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

回答

相关问题