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

Trying to output from Javascript file to HTML page?

本文关键字：HTML 页面 输出 文件 Javascript      更新时间：2023-09-26

我正在尝试从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;

}

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

…希望能有所帮助

编辑:添加了完整的Main函数，以显示整个函数的外观。

可以将结果作为对象返回。下面的内容:

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

这被称为JavaScript对象文字表示法。你可以在这篇文章中了解更多。

编辑:

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

我在jsFiddle上发布了一个使用你的代码的例子。另外，这一行还有一个bug:

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

i++应该是j++

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

$("#orangeSel").val()

同样，您需要在执行计算后设置值

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

I believe如果您的答案区域是输入，则可以使用val('the answer')代替html。

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

var output=[ val1, val2, val3];

然后用foreach

遍历em
for (i in output){
  do something
}

如果你想在你的html中显示这些值，我建议你直接从javascript中设置这些值，给你想要的单元格一个ID，然后像这样设置一个值

document.getElementById('answer1').innerHTML = val1;
相关文章：